Display nested attributes in hit results

Hello Algolia Community!

I have been trying to display a piece of information within a record and I’m not certain how. I have no problem accessing the basic attributes like rank, title, and hardwareid, but I cannot get productImages to display. I’m not sure if I’ve hit a limitation of algolia or if I’m not using correct templating syntax.

I’m using JavaScript and InstantSearch.js version 3. My template is as follows:

search.addWidget(
instantsearch.widgets.hits({
container: ‘#hits’,
templates: {
item: <div class="hit-name"> {{#helpers.highlight}}{ "attribute": "hardwareid" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "manufacturername" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "tags" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "productImages.sys.id" }{{/helpers.highlight}} </div> ,
},
})
);

Here is a sample search record with the information I’m trying to display in results highlighted:

Thanks!

Welcome to the community @sgtkellogg!

Hmm, interesting. Could there be an issue with the highlighting here? is productImages set as an attribute for highlighting?

I was able to access a nested attribute in this codesandbox: https://codesandbox.io/s/instantsearchjs-app-y781c

With this codesnippet:

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
<article>
  <h1>{{{_highlightResult.name.value}}}</h1>
  <p>{{{hierarchicalCategories.lvl0}}}</p>
</article>
`,
    },
  })
);

where hierarchicalCategories is a nested object:

image

If this format is not working, would you mind reproducing the issue in a codesandbox (forking the one here should be a good start), so that we can look into it further?

Hi Maria,

Thanks for the response and warm welcome!

I did make some progress and am able to access some nested data; for example I can get my tags using the following code:

{{_highlightResult}}{{#tags}}{{tags}}{{/tags}}

This yielded my tags, although oddly it displays them 5 times in repeat. I tried to use many different ways to access my nested data, such as:

{{_highlightResult.productImages}}
{{_highlightResult.productImages.sys.id}}
{{#helpers.snippet}}{ “attribute”: “productImages.sys.id” }{{/helpers.snippet}}

All I get is either a blank response, or this weird thing: [object Object]

My whole template looks like this:

search.addWidget(
instantsearch.widgets.hits({
container: ‘#hits’,
templates: {
item: <div class="hit-name"> {{_highlightResult.title.value}} {{_highlightResult}}{{#tags}}{{tags}}{{/tags}} {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}} {{#helpers.highlight}}{ "attribute": "manufacturername" }{{/helpers.highlight}} {{_highlightResult.productImages}} {{_highlightResult.productImages.sys.id}} {{#helpers.snippet}}{ "attribute": "productImages.sys.id" }{{/helpers.snippet}} </div> ,
},
})
);

and the entire output results in:

  1. ASRock X399 Taichi sTR4 SATA 6Gb/s USB 3.1/3.0 ATX AMD Motherboard [object Object]Motherboards,Internal Components,Computer Components,Computers & Accessories,ElectronicsMotherboards,Internal Components,Computer Components,Computers & Accessories,ElectronicsMotherboards,Internal Components,Computer Components,Computers & Accessories,ElectronicsMotherboards,Internal Components,Computer Components,Computers & Accessories,ElectronicsMotherboards,Internal Components,Computer Components,Computers & Accessories,Electronics ASRock X399 Taichi sTR4 SATA 6Gb/s USB 3.1/3.0 ATX AMD Motherboard ASRock [object Object]

I was experimenting with different ways to display things so its a bit of a mess, but I have no idea why [object Object] displays, and also why my tags repeat many times. Just FYI: I purposefully repeat the title, and the manufacturername (ASRock) is also featured in the data of the title, so it appears to be repeating but is not.

I forked the sandbox and put my search info: https://codesandbox.io/s/instantsearchjs-app-bc8i2?fontsize=14

I think maybe I don’t fully understand mustache? I’m not sure :sweat_smile: Thanks again for the help!

Best,
Chris

Note: I fixed my issue with the repeating tags, although it still says object object at the beginning of them.
I also tried these in the sandbox, all which yielded the “object object” issue. :

{{{_highlightResult.productImages}}}{{#sys}}{{id}}{{/sys}}
{{{_highlightResult}}}{{{#productImages}}}{{{/productImages}}}
{{{_highlightResult}}}{{{#productImages}}}
{{{productImages}}}

Adding .sys.id or .value to anything either makes it disappear or has no effect.

Combinations like this (I tried many) also yield nothing or sometimes object object:

{{{#productImages}}}{{{#sys}}}{{{id}}}{{{/sys}}}{{{/productImages}}}

I’ve since found a way to flatten my data so its no longer nested, so workaround achieved!

2 Likes

Hi @sgtkellogg,

Sorry for the delay in getting back to you but, I’m glad you found a work around!

Would you mind posting it here so that anyone else who runs into this can follow your solution?

We appreciate you being part of the Algolia Community and your contribution!