transformData to transformItems issue

Hello, we have a hits template for version 2 that includes a transformData option that splits a string from an attribute and then wraps each value in the string with a hyperlink that filters the hits results on the value selected.

For example, in the hits template, we have a category attribute that lists separately all the categories associated with a particular hit. When the user clicks on a category name in one of the hits, they go to a page with all of hits associated with that category filter and the name of the category in the current refinements. Basically it works the same as if they were to click on a value in a refinementsList widget, but because of the complexity of the subject matter, it is helpful to have the categories displayed in the hits template.

I am trying to upgrade this widget to version 4. I’ve read through the docs, and I’m a little embarrassed I don’t know where the script is going wrong. I have poured through the docs and have attempted to update the transformData option with the new transformItems option but I’m just not getting it. It could be something very simple, but I’m not sure.

Here’s an example of the hits template from my algolia v2. Both the inventors and the categories in my hits template uses this transformData function.

<!-- Note the inventors widget is added but not made visible.  Having it available (but hidden) allows inventors links to work -->
[%templateFieldAlgoliaInventorsWidget%]

/* Hit Container */
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
item: '<div class="hit">' +
            '    <div class="hit-content">' +
            '        <a href="{{{Url}}}" class="hit-name">{{{title}}}</a>' +
            '        <div style="height:5px;"></div>' +
           '       <div class="hit-description" style="font-size: normal;font-weight: bold;">Inventors: {{{finalPathInventors}}}</div>' +
           '       <div style="height:0px;"></div>' +
            '        <span class="hit-description" style="font-weight: bold;">Summary: </span><span>{{{descriptionTruncated}}}</span>' +
            '        <div style="height:5px;"></div>' +
            '        <span class="hit-description" style="font-weight: bold;">Disclosure Date: </span><span>{{{disclosureDate}}} </span>' +
            '        <div style="height:5px;"></div>' +
            '        <div class="hit-description" style="font-size: normal;font-weight: bold;">Categories: {{{finalPathCategories}}}</div>' +
            '        <div style="height:5px;"></div>' +
            '    </div>' +
            '</div>'
},
       transformData: {
          item: function(refinement) {
            var addCommas = true;
            refinement = refineInventors(refinement, addCommas); 
            refinement = refineCategories(refinement, addCommas);
            return refinement;          
          } // end of item
        } // end of tranformData function
      })
    );

    [%templateFieldRefineInventors%]

    [%templateFieldRefineCategories%]

If there is anything else I can provide and/or if there is now a better way to do it, please let me know. I tried to insert the scripts but it kept 403 on me. I have them and would be happy to send them or post them, but I don’t see how to do it here.

Thank you

Thanks to some kind people I figured it out:

transformItems: (items) => {
  return items.map((item) => { 
           var addCommas = true;
            item = refineInventors(item, addCommas); 
            item = refineCategories(item, addCommas);
            return item;   
         });
},

})
);