javascript – Mustache,迭代JSON对象

前端之家收集整理的这篇文章主要介绍了javascript – Mustache,迭代JSON对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个 JSON对象数组,我正在尝试找出如何在Mustache.js中显示它们.数组的长度和内容可以变化.

例:

[ Object { id="1219",0="1219",title="Lovely Book ",url= "myurl},Object { id ="1220",0="1220,title "Lovely Book2",url="myurl2"}]

我试过了:

$.getJSON('http://myjsonurl?type=json',function(data) {
        var template = $('#personTpl').html();
        var html = Mustache.to_html(template,data);
        $('#test').html(html);

和模板:

<script id="personTpl" type="text/template">
TITLE: {{#data}} {{title}} IMAGE: {{image}}
<p>LINK: <a href="{{blogURL}}">{{type}}</a></p>  {{/data}} 
</script>

但这并没有显示任何东西.

我已经尝试将JSON放入一个数组中,然后直接使用产品[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);                      

});

这将显示一个记录正常,但我如何迭代它们并显示所有?

解决方法

您需要一个看起来像这样的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);

所以像这样的东西应该工作:

$.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);
});

});
原文链接:https://www.f2er.com/js/153668.html

猜你在找的JavaScript相关文章