0

我的 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);
     });
});

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

大 大 sergio 2009, big2 large2 sergio2 20092

4

1 回答 1

0

尝试使用

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

代替

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

演示

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

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

演示

请注意，$.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])
            );
        }
    }
}

演示

于 2013-11-03T03:23:16.633 回答