javascript Mustache ，遍历 JSON 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9671993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mustache , iterating over JSON objects
提问by BobFlemming
I have a JSON array of objects, and am trying to work out how to display them in Mustache.js. The array can be variable in length and content.
我有一个 JSON 对象数组，我正在尝试研究如何在 Mustache.js 中显示它们。数组的长度和内容可以是可变的。
Example:
例子：
[ Object { id="1219", 0="1219", title="Lovely Book ", url= "myurl} , Object { id ="1220" , 0="1220 , title "Lovely Book2" , url="myurl2"}]
Ive tried:
我试过了：
$.getJSON('http://myjsonurl?type=json', function(data) {
var template = $('#personTpl').html();
var html = Mustache.to_html(template, data);
$('#test').html(html);
and the template:
和模板：
<script id="personTpl" type="text/template">
TITLE: {{#data}} {{title}} IMAGE: {{image}}
<p>LINK: <a href="{{blogURL}}">{{type}}</a></p> {{/data}}
</script>
but that doesn't display anything.
但这没有显示任何内容。
I've tried putting the JSON into an array, and then accessing it directly using products[1]something like this:
我试过将 JSON 放入一个数组中，然后使用以下内容直接访问它 products[1]：
$.getJSON("http://myjsonurl?type=json", function(json)
{
var products = [];
$.each(json, function(i, product)
{
var product =
{
Title:product.title,
Type:product.type,
Image:product.image
};
products.push(product);
;
});
var template = "<h1>Title: {{ Title }}</h1> Type: {{ Type }} Image : {{ Image }}";
var html = Mustache.to_html(template, products[1]);
$('#json').html(html);
});
which will display one record fine, but how can I iterate over them and display all ?
这将很好地显示一条记录，但是如何遍历它们并显示所有记录？
回答by StuR
You need a single JSON object that looks like:
您需要一个如下所示的 JSON 对象：
var json = { id:"1220" , 0:"1220", title:"Lovely Book2", url:"myurl2" };
var template = $('#personTpl').html();
var html = Mustache.to_html(template, json);
$('#test').html(html);
So something like this should work:
所以这样的事情应该有效：
$.getJSON('http://myjsonurl?type=json', function(data) {
var template = $('#personTpl').html();
$.each(data, function(key,val) {
var html = Mustache.to_html(template, val);
$('#test').append(html);
});
});
回答by Amin Eshaq
For your template to work the way you have it, your json needs to look like this
为了让您的模板按照您的方式工作，您的 json 需要如下所示
{
"data": [
{ "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"},
{ "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"},
{ "id":"1219", "0":"1219", "title":"Lovely Book ", "url": "myurl"}
]
}
回答by mogetutu
This should make eliminate the need to do an each statement
这应该可以消除执行 each 语句的需要
var json = { id:"1220", 0:"1220", title:"Lovely Book2", url:"myurl2" };
var stuff = {stuff: json};
var template = $('#personTpl').html();
var html = Mustache.to_html(template, stuff);
$('#test').html(html);
In your Template, do this to loop through stuff
在您的模板中，执行此操作以遍历内容
<script id="personTpl" type="text/template">
{{#stuff}}
TITLE: {{title}} IMAGE: {{image}}
<p>LINK: <a href="{{blogURL}}">{{type}}</a></p>
{{/stuff}}
</script>
