Parse function or variable to instantsearch.js connectors

I implement custom widget by using connectors of instantsearch.js, using Angularjs 1.5
By the way I try to parsing a function or variable in to connectors render

error : TypeError: Cannot set property ‘paramToParse’ of undefined

export const searchAlgoliaComponent = {
    controller: class SearchAlgoliaComponent {
      constructor (){
      }

     $onInit() { 
        this.paramToParse = 0;
        this.search = instantsearch(/* parameters */);
        const makePriceRefine = instantsearch.connectors.connectRefinementList(this.renderFnPrice);
        this.search.addWidget(makePriceRefine({
            containerNode: $('#prices'),
            attributeName: 'Price'
        }));
     } 

     renderFnPrice(RefinementListRenderingOptions,  isFirstRendering) {
          if (isFirstRendering) {
                 this.paramToParse = 100;
                 // error 
            }

     }

    }      
}

Change this to:

const makePriceRefine = instantsearch.connectors.connectRefinementList(this.renderFnPrice.bind(this));

That should do it, this is an issue of JavaScript context.

Also, did you follow any particular webpage as for Angular + InstantSearch.js? If so let us know the link.

cc @iam4x

1 Like

Its seem like it just working as my example but if I try to implement like this its error undefined

renderFnPrice(RefinementListRenderingOptions,  isFirstRendering) {
          if (isFirstRendering) {
                 this.paramToParse = 100;
                 // now its working 
            }

             RefinementListRenderingOptions.widgetParams.containerNode
                .find('label[data-refine-value]')
                .each(function() {
                    $(this).on('click', function(event) {
                        if(!$(this).data('is-dsiable')) {
                            event.stopPropagation();
                            event.preventDefault();
                            RefinementListRenderingOptions.refine($(this).data('refine-value'));      
                             // if i implement like this 
                            this.paramToParse = $(this).data('refine-value')
                             // this.paramToParse value not update
                            // or like this 
                           this.$state.go('product', { sortBy: $(this).data('refine-value') }, { reload: false, notify: false })                        
                             // error TypeError: Cannot read property 'go' of undefined
                        }
                        
                    });
                });
     }

Hello @tech2

In your second code example, this is the same issue you loose the this context. You can it this way:

renderFnPrice(RefinementListRenderingOptions,  isFirstRendering) {
          if (isFirstRendering) {
                 this.paramToParse = 100;
                 // now its working 
            }

            // save reference to `this` for later
            var self = this;

             RefinementListRenderingOptions.widgetParams.containerNode
                .find('label[data-refine-value]')
                .each(function() {
                    $(this).on('click', function(event) {
                        if(!$(this).data('is-dsiable')) {
                            event.stopPropagation();
                            event.preventDefault();
                            RefinementListRenderingOptions.refine($(this).data('refine-value'));      
                             // if i implement like this 
                            self.paramToParse = $(this).data('refine-value')
                             // this.paramToParse value not update
                            // or like this 
                           self.$state.go('product', { sortBy: $(this).data('refine-value') }, { reload: false, notify: false })                        
                             // error TypeError: Cannot read property 'go' of undefined
                        }
                        
                    });
                });
     }

You see I’ve changed this to self where you needed to reference the upper scope :+1:

2 Likes