How to manipulate an array, when outputting to results template?

instantsearch

#1

Here’s what the data looks like in the Algolia index:

  "locations": [
    "Chilton, WI",
    "Manitowoc, WI"
  ],

Here’s the template code:

<div class="clinics">{{locations}}</div>

This is the HTML output on screen:

Chilton, WI,Manitowoc, WI

Where does the comma separator come from? I’m assuming there’s a native transformation function at play here, but not sure where to look to override this.

I’m using instantsearch.js.

2nd question (if you will indulge me) - can anyone point me to documentation on accessing an array objects in my index?

Ideally, my above array would be, where the integer is the key for that location. But not sure how to access it.

  "locations": [
   555:  "Chilton, WI",
   556:  "Manitowoc, WI"
  ],

Thanks for any help, I’m learning - slowly :slight_smile:


#2

Hi @ldao,

The first question is related to how an array is coerced to a string. By default toString() on an array will join this array with a comma (see the default value for the separator). You cannot override this behavior from the template. What you can do instead is looping over the array to create the list. We use the Mustache syntax for the template. Here is how to loop over an array of strings:

{{#locations}}
  {{.}}
{{/locations}}

For the second question, it seems that the structure that you’ve shown is not a valid JavaScript data structure. You have multiple solutions to represent this value (object or an array of objects). Here is what it looks like with an array of objects:

{
  "locations": [
    { "key": 555, "value": "Chilton, WI" },
    { "key": 556, "value": "Manitowoc, WI" }
  ]
}

I’ve picked this solution because it’s easier to loop over it inside the template:

{{#locations}}
  Key: {{key}}
  Value: {{value}}
{{/locations}}

Hope that helps, let me know if you have questions.

Cheers!


#3

Thank you Samuel, that’s very helpful. I didn’t think about looking up the Moustache syntax!