Can't call function in transformData (addWidget)

Our project using Angular 1.5 when we call this fuction

     this.search.addWidget(
            instantsearch.widgets.hits({
                container: '#hits',
                hitsPerPage: 20,
                templates: {
                    empty: noResultsTemplate,
                    item: hitTemplate
                },
                transformData: {
                    item: function(data) {
                        data.Image = this.getImage(data.Image)
                        return data;
                    }
                }
            })
        );

We can’t call this.getImage inside transformData :confused:

  1. Or can we call angular function inside hitTemplate ?

<img class="gridPhotoStyles lazyload fade-in" ng-src="$ctrl.getImage{{Image}}" style="width: 100%;height: auto;" alt="{{Name}}" title="{{Name}}" />

I try and I can’t get the image its look like template not execute function in template

Hello @tech2

When you are doing:

transformData: {
  item: function(data) {
    data.Image = this.getImage(data.Image);
    return data;
  }
}

The this is referencing funtion(data) { ... } itself, it means you are targeting the function itself, but not the upper scope.

If you use an arrow function, like this:

transformData: {
  item: (data) => {
    data.Image = this.getImage(data.Image);
    return data;
  }
}

The this will be now referencing the upper scope, it should be the class of your Angular component.

Can you provide me the full code of the component, so I can help you more?

Maxime.

1 Like

Thanks Maxime you save my days :slight_smile:

1 Like