使用 jQuery.each() 遍历对象

Question

我有一个 JSON 这种格式的对象

var data = [
        { "label" : "January"  }, { "value"  : 10  }, { "barcolor" : "rgba(128, 0, 0, 0.9)" },
        { "label" : "February" }, { "value"  : 20  }, { "barcolor" : "rgba(0, 128, 0, 0.9)" },
        { "label" : "October"  }, { "value"  : 100 }, { "barcolor" : "rgba(0, 0, 128, 0.9)" },
        { "label" : "November" }, { "value"  : 80  }, { "barcolor" : "rgba(255, 0, 0, 0.9)" },
        { "label" : "December" }, { "value"  : 20  }, { "barcolor" : "rgba(0, 255, 0, 0.9)" },
        { "label" : "January"  }, { "value"  : 70  }, { "barcolor" : "rgba(0, 0, 255, 0.9)" }
    ];

我想以

这样的合并格式打印

<h1 style="color: rgba(128, 0, 0, 0.9);">January <em>count: 10</em></h1>

这些应该是 6 h1 或 "Label" 中的任何数字，但是我的 jQuery 循环 18

$.each(data, function(index, val) {
    //console.log('index : ' + index + ' || val : ' + val.label);
    $.each(val, function(i, v) {
    //console.log('i : ' + i + ' || v : ' + v);
        var dhtml = '<h1 style="color:' + val.barcolor + '">' + val.label + '<em>' + val.value + '</em></h1>';
        $('body').append(dhtml);
    });
});

没有得到想要的输出 http://codepen.io/iahmad/pen/BLgJBb

Answer 1

用这个替换你的代码并尝试：

var data = [
       { "label" : "January"  ,  "value"  : 10  ,  "barcolor" : "rgba(128, 0, 0, 0.9)" },
       { "label" : "February" , "value"  : 20  ,  "barcolor" : "rgba(0, 128, 0, 0.9)" },
       { "label" : "October"  ,  "value"  : 100 ,  "barcolor" : "rgba(0, 0, 128, 0.9)" },
       { "label" : "November" , "value"  : 80  ,  "barcolor" : "rgba(255, 0, 0, 0.9)" },
       { "label" : "December" ,  "value"  : 20  ,  "barcolor" : "rgba(0, 255, 0, 0.9)" },
       { "label" : "January"  ,  "value"  : 70  ,  "barcolor" : "rgba(0, 0, 255, 0.9)" }
        ];

$.each(data, function(i, v) {
var dhtml = '<h1 style="color:' + v.barcolor + '">' + v.label + '<em>' + v.value + '</em></h1>'
$('body').append(dhtml);
                    });

Answer 2

你应该改变你的 JSON 格式和循环，这里是工作 JS（复制到代码笔）：

var data = [
    { "label" : "January", "value"  : 10, "barcolor" : "rgba(128, 0, 0, 0.9)" },
    { "label" : "February", "value"  : 20, "barcolor" : "rgba(0, 128, 0, 0.9)" },
    { "label" : "October", "value"  : 100, "barcolor" : "rgba(0, 0, 128, 0.9)" },
    { "label" : "November",  "value"  : 80, "barcolor" : "rgba(255, 0, 0, 0.9)" },
    { "label" : "December", "value"  : 20,  "barcolor" : "rgba(0, 255, 0, 0.9)" },
    { "label" : "January", "value"  : 70,  "barcolor" : "rgba(0, 0, 255, 0.9)" }
];

$.each(data, function(i, val) {
    var dhtml = '<h1 style="color:' + val.barcolor + '">' + val.label + '<em>' + val.value + '</em></h1>'
    $('body').append(dhtml);
});

Answer 3

您的 JSON 应采用以下格式：

var data = [
        { "label" : "January", "value"  : 10, "barcolor" : "rgba(128, 0, 0, 0.9)" },
        { "label" : "February", "value"  : 20, "barcolor" : "rgba(0, 128, 0, 0.9)" },
        { "label" : "October", "value"  : 100, "barcolor" : "rgba(0, 0, 128, 0.9)" },
        { "label" : "November", "value"  : 80, "barcolor" : "rgba(255, 0, 0, 0.9)" },
        { "label" : "December", "value"  : 20, "barcolor" : "rgba(0, 255, 0, 0.9)" },
        { "label" : "January", "value"  : 70, "barcolor" : "rgba(0, 0, 255, 0.9)" }
    ];

下面是JS代码：

$.each(data, function(index, val) {
        var dhtml = '<h1 style="color:' + val.barcolor + '">' + val.label + '<em>' + val.value + '</em></h1>'
        $('body').append(dhtml);
});

使用 jQuery.each() 遍历对象

loop over object with jQuery.each()

each

jquery