Looping though an index in template?

Hi there,

I am attempting to make an instant search with this documentation: https://www.algolia.com/doc/tutorials/search-ui/instant-search/build-an-instant-search-results-page/instantsearchjs/ and in my hit template I would like to be able to loop through some values in my html but I see no way of looping. My object looks like this:

retailer: {
product [
“product1”
“product2”
]
}

I would like to output each of the products on the page. Is this something that is possible?

Sorry if this is obvious but couldn’t find anything in the documentation.

Thanks!

1 Like

Hi,

InstantSearch uses Mustache under the hood for templating.
You can find the documentation about arrays and loops here.

Let me know if that worked for you! :slight_smile:

1 Like

Thank you! That’s exactly what I needed!

You’re welcome! Don’t hesitate to reach out to us again if you have any other questions :slight_smile:

I am in a similar bind. I rendered my loop with mustache like so:

{{#tags}}
  <div class="ui tiny label">
    {{ . }}
  </div>
{{/tags}}

But how can i include the _highlightResult tag? as in {{ _highlightResult.tag.value }}. I have tried a few things without success. Am I missing something?

Thanks for your help!

1 Like

Just ran into this also, would like to know the answer! :slightly_smiling_face:

Hi @karim.matrah - it would be great to have a little more help with this please :slight_smile: I can’t work out how to implement the solution given in the mustache documentation (never seen mustache before). Where should I put the dot to signify the array items, for my ‘answers’ array?

function Item({hit}) {
  return (
    <div className="hit-name">
        <p>
          Q <Highlight attributeName="question" hit={hit} />
        </p>
      <ol>
        <li>
          <Highlight attributeName="answers" hit={hit} />
        </li>
      </ol>
  </div>
  );
};

Hi @sab.gaby, here’s a jsFiddle showing how to display array of objects using Mustache/Hogan: http://jsfiddle.net/dwolvert/c5sqN/light/

Let me know if that helps, if it does not, please provide a live jsFiddle example with your data that is failing, thanks!

@lollymay This seems to be a React InstantSearch question while this thread is about InstantSearch.js, could you create a new thread explaining your issue (along with the type of results you are trying to display)? Also if you can, create a simple example using our CodeSandbox widget: https://codesandbox.io/s/3yzryxy6l1

Thanks!

Hey, thanks for the reply. But that wasn’t my question.

Here is my fiddle. Basically I want to be able to highlight results for an array, like the tags to my pages. I am using {{{ _highlightResult.title.value }}} and {{{ _highlightResult.content.value }}}. But would like to also be able highlight results for {{#tags}}, {{#hostsSimple}}, etc. which are arrays and are displayed as {{ . }}.

Thanks for any help!!!

Hi @sab.gaby here’s how to do it: http://jsfiddle.net/jLmad16c/2/

image

        <br/> Tags:
        {{#_highlightResult.hostsSimple}}
          {{{value}}}
        {{/_highlightResult.hostsSimple}}

Let me know how it goes.

holy guacamole!!! this is exactly what I needed!! thank you soo much! :heart:

1 Like