Question

我的json代码有问题。我想追加每个json值来自一个要附加到与json数据的键匹配的html类名的键。

如果你在生活演示中看到了结果。它只追加最后一条记录。是否可以按顺序显示所有记录？

JSON

var json = '[{"castle":"big","commercial":"large","common":"sergio","cultural":"2009"},' + '{"castle":"big2","commercial":"large2","common":"sergio2","cultural":"20092"}]';

HTML

<div class="castle"></div>
<div class="commercial"></div>
<div class="common"></div>
<div class="cultural"></div>

的javascript

var data = $.parseJSON(json);
$.each(data, function(l,v) {
    $.each(v, function(k,o) {
        $('.'+k).attr('id', k+o);
        console.log($('#'+k+o).attr('id'));
        $('#'+k+o).text(o);
     });
});

更多插图...... 我希望现场演示中的结果看起来像这样

大大塞尔吉奥 2009年， BIG2 large2 sergio2 20092

Answer 1

尝试使用

$('#'+k+o).append(o+',');

而不是

$('#'+k+o).text(o);

Demo

但我会使用更快的替代方案：

var data = JSON.parse(json);
for(var i in data[0]) {
    if(data[0].hasOwnProperty(i)) {
        var txt = data[0][i];
        for(var j=1; j<data.length; j++) {
            txt += ', ' + data[j][i];
        }
        $('.'+i).text(txt);
    }
}

Demo

请注意，$.each甚至比jQuery开发人员建议使用JS循环更慢。并且要注意，DOM的更改是昂贵的，所以最好将文本存储在变量中，当你拥有它时，所有都附加它，但是避免将它逐个添加。

如果您不希望它们混合，请使用

var data = JSON.parse(json),
    $el = $('#data');
for(var i=0, l=data.length; i<l; ++i) {
    for(var j in data[i]) {
        if(data[i].hasOwnProperty(j)) {
            $el.append(
                $('<li>')
                    .attr("id",j+data[i][j])
                    .text(data[i][j])
            );
        }
    }
}

Demo

将json数据附加到html类名

1 个答案: