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或任何“标签”没有，但是我的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（复制到codepen）：

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

Answer 4

以上代码解决了您的问题，但每次代码在$each内运行时都会附加

最佳方式是（干不要自己重复）

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

＆＃13;

使用jQuery.each（）循环遍历对象

4 个答案: