loop over object with jQuery.each()

Question

I have an JSON object in this format

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

I want to print in combine format like

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

these should be 6 h1 or whatever no of "Label", BUT MY jQuery going 18 in a loop

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

not getting desired output http://codepen.io/iahmad/pen/BLgJBb

That's not JSON. It's an array of objects. JSON is a data format. — Felix Kling
– Felix Kling, Commented Oct 30, 2016 at 17:05

jonzee · Accepted Answer · 2016-10-30 17:23:16Z

1

You should change your JSON format and loop, here is working JS (copy to 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);
});

edited Oct 30, 2016 at 17:23

answered Oct 30, 2016 at 17:01

jonzee

1,60913 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

eminence_majesty · Accepted Answer · 2016-10-30 17:06:59Z

Your JSON should be in this format :

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

And following is the JS code :

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

James · Accepted Answer · 2016-10-30 17:27:37Z

1

Replace your code with this and try:

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

edited Oct 30, 2016 at 17:27

answered Oct 30, 2016 at 17:00

James

7276 silver badges10 bronze badges

Collectives™ on Stack Overflow

loop over object with jQuery.each()

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related