JsRender/ JsViews: how to loop a nested json?

Question

How can I loop a nested json like this below with jsrender/ jsviews?

var data = {  
    nested: {
        page: {
            type: "X",
            items: {
                "0":{"title":"page - hello"},
                "1":{"title":"page - world"}
            }
        },
        post: {
            type: "Y",
            items: {
                "0":{"title":"post - hello"},
                "1":{"title":"post - world"}
            }
        }  
    }

};

template,

{{for nested}}
<div>
    <h1>Type: {{ :type }}</h1>
    {{for items}}
    <p>Title:  {{:title}} </p> 
    {{/for}}
</div>
{{/for}}

result,

Type: {{ :type }}

What I am after,

Type: X
Title - page - hello
Title - page - World

Type: Y
Title: post - hello
Title: post - World

BorisMoore · Accepted Answer · 2020-07-16T22:03:09.930

4

Updated response:

JsRender and JsViews have a {{props}} tag for iterating through fields, which is documented here.

For the example data and output requested above, you can do it using the following template:

<script id="myTmpl" type="text/x-jsrender">

{{props nested}}
  <div>
    <h1>Type: {{:prop.type}}</h1>
    {{props prop.items}}
      <p>Title: {{:prop.title}}</p>
    {{/props}}
  </div>
{{/props}}

</script>

And the following code:

var myTmpl = $.templates("#myTmpl");

var data = {  
  nested: {
    page: {
      type: "X",
      items: {
        "0":{"title":"page - hello"},
        "1":{"title":"page - world"}
      }
    },
    post: {
      type: "Y",
      items: {
          "0":{"title":"post - hello"},
          "1":{"title":"post - world"}
      }
    }
  }
};

var html = myTmpl.render(data);

Here it is in a jsfiddle

edited Jul 16 '20 at 22:03

answered Jan 03 '14 at 02:30

BorisMoore

8,444
1
16
27

Thanks. Can I ask - what does `#data` means in `{{props #data}}...{{/prop}}`? – Run Jan 03 '14 at 06:29
1

`#data` is the current data item (or data context, if you will). See http://www.jsviews.com/#assigntag. In fact `#data` is short for `#view.data` and `#view` is the current 'view'. See this sample for example: http://www.jsviews.com/#samples/jsr/paths – BorisMoore Jan 03 '14 at 23:43

score -1 · Answer 2 · answered Jan 02 '14 at 20:38

-1

I think that the problem your having is your declaring an object instead of an array in your data. Try it with the data bellow.

  var data = {  
      nested: {
        {
            type: "X",
            items: {
                "0":{"title":"page - hello"},
                "1":{"title":"page - world"}
            }
        },
        {
            type: "Y",
            items: {
                "0":{"title":"post - hello"},
                "1":{"title":"post - world"}
            }
        }  
    }

  };

This way nested is an array and the for should be able to loop over it.

answered Jan 02 '14 at 20:38

SzabV

244
1
6

So I can loop an object in json then?? – Run Jan 02 '14 at 20:40
1

A quick read of the documentation suggests you can only loop over an array with for. http://www.jsviews.com/#fortag In all the example code they declare json arrays of objects and only iterate over arrays. – SzabV Jan 02 '14 at 20:42
Thanks. So what tag should I use to loop an object then? – Run Jan 02 '14 at 20:43
1

Sorry but I couldn't see any tags that would loop over the properties of a serialized object. The easiest thing would probably be to reshape your data and then apply the template. You may be able to do this by desalinizing your object adding the properties your interested in to an array then serializing the array and using it as your data. Not sure if that's the right way to do it. I'm not an a json expert. – SzabV Jan 02 '14 at 20:46
@SzabV I have DV'ed this answer, not as an attack, but because mutating the data structure is simply not necessary. The accepted answer proves this truth. – mickmackusa Jul 16 '20 at 22:43

JsRender/ JsViews: how to loop a nested json?

2 Answers2