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
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