Adding functions for each attributes

I found out that we can add functions for each attributes like this.
instantsearch.widgets.hits({
// …
transformItems(items) {
return items.map(item => ({
…item,
content: item.name.toUpperCase(),
location: item.location.map(x => { // function here })
gaiyo: item.gaiyo.function(),
}));
},
});

Now I am trying to put this function below to display only matched result.
How is it possible ?

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

Seems like it’s not working.

instantsearch.widgets.hits({
// …
transformItems(items) {
return items.map(item => ({
…item,
CONTENT: function (items) {
return items.map(function (item) {
item.__matchesName = item._highlightResult.CONTENT.matchLevel === ‘full’;
return item;
});
},
LOCATION:function (items) {
return items.map(function (item) {
item.__matchesName = item._highlightResult.LOCATION.matchLevel === ‘full’;
return item;!
},
}));
},
});

  });

Screenshot 2020-11-15 184641|690x440

Hello there!

Indeed, the transformItems method lets you alter items before they’re displayed in your template. This can be helpful to add attributes, or filter out some items.

To only display results with a matchLevel equal to "full", you could use Array.prototype.filter to exclude non-matching items:

instantsearch.widgets.hits({
  // ...
  transformItems(items) {
    return items.filter(
      (item) => item._highlightResult.name.matchLevel === 'full'
    );
  },
});

Is this what you were trying to achieve?

could you show me the one added several attributes ?
I always get the sample with one attributes and have difficulty adding more than one attributes.
Thank you.

If you need to add attributes to each item, you can use either Object.assign or the object spread syntax to merge the item with a new one containing extra properties.

For example:

instantsearch.widgets.hits({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      newAttribute: 'I am a new attribute!',
      anotherNewAttribute: 'Here we go again!',
    }));
  },
});

In this example, each item in your template will contain newAttribute and anotherNewAttribute.

Does this help?

Hi,
I got bunch of errors.

Hey,

To help you debug properly, I need to know more about the errors you’re getting and see actual code. Can you please share a reproducible CodeSandbox so that we can see exactly the same thing? Here’s a starter template.

Please check.

The errors you’re getting are JavaScript ones, they’re not Algolia-related.

The property GAIYO isn’t always defined on item._highlightResult because it appears that not all your records have a property GAIYO. When you try querying the property matchLevel on undefined, JavaScript raises a runtime error. Sames goes for LOCATION and CONTENT.

You can fix this issue either by making sure that the property GAIYO is in every record, or by adding a check in your front end code to avoid querying matchLevel on undefined. You can use optional chaining to do that (make sure the feature is supported by browsers you’re catering to). Otherwise, you can use the logical AND operator. To be safe, I would always keep those checks.

I also noticed some logic errors in the code:

  • You are mutating item.__matchesTitle in l. 23 while I’m assuming you want to assign item.__matchesLocation.
  • You have a nesting error in l. 35 (which InstantSearch.js is reporting in the console), where you open __matchesLocation and close __matchesTitle.

Here’s a fixed sandbox: https://codesandbox.io/s/dank-dream-qbrxh?file=/src/app.js

Best.

Hi,
I am trying to display contributor and comment detail by developing your code.

Screenshot 2020-11-17 104018

Screenshot 2020-11-17 131205

I think the problem is how I created the data ?
I would like to display comment detail and contributor at the same time.
Please use the word “ぜひ!” when you run check since comments are pretty over lapping.
Thank you.

Hi @ynaka,

Please see here: It is not showing content attributes