Search code examples
jqueryjsonjsrenderjsviews

JsRender/ JsViews: how to loop a nested json?


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

Solution

  • 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