How to add some more attributes in the transformItems

Hi, I am trying to add some more attributes in the transformItems section; however, I cannot figure it out how.
Please advise.

instantsearch.widgets.hits({
container: ‘#hits’,
transformItems: function (items) {
return items.map(function (item) {
item.isGAIYO = item._highlightResult.GAIYO.matchLevel === ‘full’;
return item;
});
},
templates: {
item: `

	{{#isGAIYO}}{{#helpers.highlight}}{ "attribute": "GAIYO" }{{/helpers.highlight}}{{/isGAIYO}}
	</div>	
  `,
},

})
]);

Hello @ynaka ,

We have a template that you could use here: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/instantsearch.js-2.x

Could you please update with minimal code to show us your goal, even in a failing state and then also share with us your sample record structure? I am unsure of what you are trying to achieve.

Thank you

Hi, I think my code is pretty minimal because it is only wigets.hits.
At this moment I do no need a template since I have already have working code; however,
I was asking how to add more attributes to it.
Thanks.

Hello @ynaka,

I suspect you are close as you are already using transformItems - please see below how you take your existing item, spread the existing attributes and then add your new attribute as you wish:

transformItems(items) {
      return items.map((item) => ({
        ...item,
        upperCaseName: item.name.toUpperCase(), // new attribute
      }));
    }

Could it be you are not including the existing attributes using the spread operator (...)?

Here is the sandbox: https://codesandbox.io/s/instantsearchjs-currentrefinements-with-transformitems-forked-n2i3e?file=/src/app.js:359-500

Hi,
I don’t want any attributes displayed initially until it matches.
This one is displaying name and just changing it to upper case…

I want this kind of function with multiple attributes.

transformItems: function (items) {
return items.map(function (item) {
item.__matchesName = item._highlightResult.name.matchLevel === ‘full’;
return item;
});
},

Hello @ynaka,

Can you please update the sandbox above to show us what you’re trying to do and what is failing?
It’s not clear what you want to do.

Not sure what you mean, but let me give you something that might help.

item: (hit) => {

return `
  <article>
    <p>${instantsearch.highlight({ "attribute": "name", hit })}</p>
    <p>{{__matchesName}}</p>
  </article>
  `
}

You can return a function for the template.

I don’t want unmatched attributes to show up.
It still shows unmatched attributes and it might get messy as I add more attributes because it shows unmatched attributes.

Thank you