How can we use a multi-dimensional array to populate buttons in a search result record?

Hello Everyone,

We are looking to pull information from a multi-dimensional array and populate the data into buttons. The reason why we are using a multi-dimensional array is that there will be instances where there are different files for the same file type that we wish to populate with each record.

JSON Code
[
  {
    "objectID": 0,
    "Page": [
      {
        "Name": "",
        "Short Description": "",
        "Long Description": "",
        "Image": "",
        "Image Alt": "",
        "Hyperlink": "",
        "Category": ""
      }
    ],
    "Files": [
      {
        "Brochure": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
        "General Catalog": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
        "Flyer": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
        "Typical Specsheet": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
        "Submittal": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
        "Manual": [
          {
            "Hyperlink": [],
            "Text": []
          }
        ],
      }
    ]
  }
]

We can populate the first part of the search template, but when we get to multiple items being pulled from a multi-dimensional array, we run into the problem where the hyperlinks and text information is not being separated into different buttons. Does anyone have an idea of how we can implement this effect?

The effect we are trying to achieve is similar to JSDelivr.

Hi Brandon,

Can you provide more context for how you plan to use this multi-dimensional array with Algolia?

  • Will this data be stored as records in an index?
  • Are you using InstantSearch?

If using InstantSearch, please create a basic implementation using the template below:

Thanks in advance. I look forward to your reply!
Best regards,

Hello Jason,

The data will be stored in a single index, and I am using a search box to navigate to the search results page where it will be pulling from the index using the instant search functionality of Algolia.

Search Results Page

To the right, beneath the search field, will display a record with a title, description, literature, and hyperlink to the appropriate pages. If a record showed has multiple of a specific literature file, then it will add a button for each record within the multi-dimensional array being pulled in by the instant search.

Example Template

<a class="btn btn-info m-1" href="{Hyperlink}">{Text}</a>

Hopefully, this gives you a better idea of what we are looking to achieve with the search results.

Best regards!

Hi Brandon,

Do you plan to use Instant Search for this functionality?

If so, as requested above, can you create a basic implementation using the template below so that we can troubleshoot together?

Thanks in advance. I look forward to your reply and implementation!
Best regards,