Looping over JSON hash/dictionary

Question

There was an issue opened a few years ago on JsRender to allow looping over objects and not just arrays. One of the examples given that helped to reopen the issue was this:

{
    joe:{
        name:  'Joe',
        status: 'out'},
    jane:{
        name: 'Jane',
        status:'in'},
    jill:{
        name:'Jill',
        status:'away'}
}

Eventually, the feature was implemented but none of the examples I've found address this particular problem, it's always some subset of the data, as in the examples given at the end of the issue thread, usually looking something like this from the docs for for:

[
  {
    "name": "Pete",
    "address": {
      "city": "Seattle"
    }
  },
  {
    "name": "Heidi",
    "address": {
      "city": "Sidney"
    }
  }
]

How can I use for or props to iterate over a dictionary like the one further above? (not an array of objects) Whatever I try I receive the error:

…expected expression, got ':'

Or whatever fits the permutation I try:

{{for :data}}
{{for :#data}}
{{for :}}

etc. It's pretty normal (in my experience) to encounter dictionaries with an index like this in a JSON file so I'm surprised not to find any examples for it.

Any help or insight would be much appreciated.

I'm not using JsViews, just JsRender v0.9.87.

BorisMoore BorisMoore · Accepted Answer · 2017-07-14T05:34:10

There are several examples of {{props}} here:

http://www.jsviews.com/#propstag

In the examples you have {{props address}} - but if you want to iterate over the top-level object, you can use either {{props #data}} or {{props}} (since the object you want to iterate over is the current data context...).

The syntax {{for :#data}} is incorrect (not sure where that came from). As the error message says, there should not be a colon there. It would be {{for #data}} or {{for}} if you want to iterate over current data.

(BTW there is also a {{jsonview}} tag which can also be used with JsRender, not only with JsViews. http://www.jsviews.com/#samples/tag-controls/jsonview. Not sure if it is relevant to your scenarios though. It is actually a sample showing {{props}} running on the current data, though with data-binding. See also http://www.jsviews.com/#jsvpropstag@jsonview)

Here is a new sample (jsfiddle) which takes the http://www.jsviews.com/#samples/editable/tags sample and replaces the movies array by a movies hash. You can see use of {{props}} to iterate over the top-level dictionary. I'll add the sample to jsviews.com later...

Looping over JSON hash/dictionary

1 Answers