Display results of nested array/children

We have an array of objects containing other one more arrays with objects (children) that we’d like to display to the user. The search it self works in the children array but only displays the parent value for that match.

So when the user searches for “active” the response from algolia displays only the name from the “parent” e.g Buttons. I would like to display the name of the child e.g “Active state” in the results.
In the response i get back from algolia i have the data i need so there is nothing wrong with the search it self i guess?

Is this something that algolia provides or do i need to handle in my frontend code? Using the react instantsearch with autocomplete and React-Autosuggest.

 <AutoSuggest
          suggestions={hits}
          renderSuggestion={this.renderSuggestion}
          [....]
        />


renderSuggestion(hit) {

   return  <Highlight attribute="name" hit={hit} tagName="strong" />
    
  }

My .json fil in algolia.

   [{
        "name": "Buttons",
        "children": [
          {
            "id": "active-state",
            "uri": "/active-state",
            "name": "Active state",
            "description": "active state is when the state is active "
          {
            "id": "button-combinations",
            "uri": "/button-combinations",
            "name": "Button combinations",
            "description": a button combination is a combination of buttons,
          },
        ]
         
      },
      {...more objects},
      {...more objects},
    ]

Hi Albin!

React InstantSearch supports nested attributes, but you need to pass them explicitly in your Highlight component, as explained in the documentation.

In your case, it might be complex to display exactly what you want because you’re nesting several children in your record, and trying to search for “parts”. In Algolia, you usually want to treat one record as one result. I would recommend splitting your Algolia records further and use a flatter structure, like the following:

[
  {
    name: "Buttons",
    id: "buttons",
    children: [
      {
        name: "Active state",
        id: "active-state"
      },
      {
        name: "Button combinations",
        id: "button-combinations"
      }
    ]
  },
  {
    name: "Active state",
    id: "active-state",
    parent: [
      {
        name: "Buttons",
        id: "buttons"
      }
    ],
    url: "/active-state",
    description: "Active state is when the state is active."
  },
  {
    name: "Button combinations",
    id: "button-combinations",
    parent: [
      {
        name: "Buttons",
        id: "buttons"
      }
    ],
    url: "/button-combinations",
    description: "A button combination is a combination of buttons."
  }
]

Here, you’re able to retrieve anything with more granularity, as each searchable item has its own record. You still retain information on hierarchy, which can be useful, but you’re allowing Algolia to precisely return the most relevant result. You’ll want to use the searchableAttributes parameter with the name attribute first to make sure that a match in name is considered more relevant than a match in a nested children[].name or parent[].name.

index.setSettings({
  searchableAttributes: [
    'name',
    'children.name, parent.name'
  ]
});

Hope it helps!

Thanks for your answer.
I rewrote my json file as you showed and now it works as I intended!

So thank you for that :slight_smile: