Display properties from an array in search results

Hoping there is someone who can help. How do I display properties from an array in my search results.

An example of my raw data looks like this:

{
  "companyType": "Manufacturer",
  "certificateRef": "IFCC1671",
  "companyName": "A CHRONIS & G DOUMANIS LTD",
  "address1": "19KLM THESSALINIKI - SERRES",
  "address2": "",
  "address3": "THESSALONIKI",
  "address4": "",
  "postcode": "57200 THESSALONIKI GREECE",
  "country": "Greece",
  "phone": "00302394073483",
  "mainContact": "ANASTASIOS CHRONIS",
  "products": [
    {
      "productName": "Halspan FD30",
      "productType": "Fire Doors - Timber / FD30"
    },
    {
      "productName": "Halspan FD60",
      "productType": "Fire Doors - Timber / FD60"
    },
    {
      "productName": "Strebord FD30",
      "productType": "Fire Doors - Timber / FD30"
    },
    {
      "productName": "Strebord FD60",
      "productType": "Fire Doors - Timber / FD60"
    }
  ],

}

I am using JS to output my hits widget:

    instantsearch.widgets.hits({
        container: "#hits",
        templates: {
            empty: 'Sorry, no results for {{ query }} with your current renfinements',
            item: item => `

            
            ${instantsearch.highlight({ attribute: 'companyName', hit: item })}
            
${item.address1} ${item.address2} ${item.address3} ${item.address4} ${item.postcode} ${instantsearch.highlight({ attribute: 'country', hit: item })} ${item.productName} `, }, }),

How can I output properties such as product name as a list? I can do it using a Mustache template:

{{#products}}{{productName}}{{/products}}

How can I achieve the same in JS?

Hi @marcus.potts!

The hit object returned by search (in your case item) is a full fledged Object. You can output the products array by iterating over them however you like. For instance:

${item.products.map(product => product.productName)}

That should get you what you need.

Hi Chuck,

Thank you so much, that makes perfect sense and work a dream.

I have a related follow up question (sorry not sure if I should create a new topic for it).

If I have deduplicated my index via the dashboard, how do I then display all the common items.

For example “A CHRONIS & G DOUMANIS LTD” has 4 entries, each has a different “certificateRef”. I have deduplicated on the companyName, how can I display all the “certificateRef” items on the single result shown?

Thanks