jquery Looping through json array

Question

Hi i have a JSON array which looks like this.

 {
 "28": {
 "controllerID": "28",
 "DateDiff": "147",
 "CycleTime": "-52"
 },
 "30": {
 "controllerID": "30",
 "DateDiff": "117",
 "CycleTime": "-59"
 },
 "37": {
 "controllerID": "37",
 "DateDiff": "71",
 "CycleTime": "-56"
 },
 "40": {
 "controllerID": "40",
 "DateDiff": "59",
 "CycleTime": "-56"
 }
}

What i want to do is for each element in the array put the data in to a DIV which looks like this

 <div class="box">
 <div class="col-md-12 Top">ZW01004</div>
 <div id="28C" class="col-md-12 Midbox"></div>
 </div>

Where the number of the array corresponds to the DIV ID, so for this example the div with id 28C would have the value -52

how can i achieve this?

• Tomalak: Do you already have the DIV or should it be created as well? Also, what have you tried? We're not exactly a code writing service.
• Mahesh Thumar: You need an HTML string as an output?
• Cayce K: @Mr.Polywhirl JSON object, but you should put that in your comment for when you want to correct someone... :D

Answer 1

below working for me

<script>
var jsonArr = {
 "28": {
 "controllerID": "28",
 "DateDiff": "147",
 "CycleTime": "-52"
 },
 "30": {
 "controllerID": "30",
 "DateDiff": "117",
 "CycleTime": "-59"
 },
 "37": {
 "controllerID": "37",
 "DateDiff": "71",
 "CycleTime": "-56"
 },
 "40": {
 "controllerID": "40",
 "DateDiff": "59",
 "CycleTime": "-56"
 }
};
$.each(jsonArr, function(key, val){
 console.log(key);
 console.log(val.controllerID);
 var html = '<div class="col-md-12 Top">'+val.controllerID+'</div><div id="'+val.controllerID+'" class="col-md-12 Midbox"></div>'
 $('.box').append(html);
});
</script>

Answer 2

This is object, not an array but you can go through it using for loop

var obj = 
{
 "28": {
 "controllerID": "28",
 "DateDiff": "147",
 "CycleTime": "-52"
 },
 "30": {
 "controllerID": "30",
 "DateDiff": "117",
 "CycleTime": "-59"
 },
 "37": {
 "controllerID": "37",
 "DateDiff": "71",
 "CycleTime": "-56"
 },
 "40": {
 "controllerID": "40",
 "DateDiff": "59",
 "CycleTime": "-56"
 }
};
 for (var key in obj) {
 console.log(obj[key]);
}

Answer 3

 var response= {
 "28": {
 "controllerID": "28",
 "DateDiff": "147",
 "CycleTime": "-52"
 },
 "30": {
 "controllerID": "30",
 "DateDiff": "117",
 "CycleTime": "-59"
 },
 "37": {
 "controllerID": "37",
 "DateDiff": "71",
 "CycleTime": "-56"
},
"40": {
 "controllerID": "40",
 "DateDiff": "59",
 "CycleTime": "-56"
}
};
var obj = jQuery.parseJSON(response);
 $.each(obj, function(key,value) {
 alert(value.controllerID); 
}); 

Answer 4

Although you have an Object and not an Array, you can still use jQuery's $.each function. The jQuery.each( object, callback ) function can take an object. The callback is a key-value pair.

var data = { '28' : {
 "controllerID": "28",
 "DateDiff": "147",
 "CycleTime": "-52"
}, '30' : {
 "controllerID": "30",
 "DateDiff": "117",
 "CycleTime": "-59"
}, '37' : {
 "controllerID": "37",
 "DateDiff": "71",
 "CycleTime": "-56"
}, '40' : {
 "controllerID": "40",
 "DateDiff": "59",
 "CycleTime": "-56"
}};
$(document).ready(function() {
 $.each(data, function(key, value) {
 $('body').append(
 $('<div>').addClass('box').append(
 $('<div>').addClass('col-md-12 Top').html(value.DateDiff)
 ).append(
 $('<div>').attr('id', value.controllerID + 'C').html(value.CycleTime)
 .addClass('col-md-12 Midbox')
 )
 );
 });
});

body {
 background: #DDD;
}
.box {
 border: thin solid black;
 margin: 2px;
 background: #FFF;
}

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

Answer 5

var obj = JSON.parse(your_json_string);
var keys = Object.keys(obj);
for(var i = 0; i < keys.length; i++){
 var id = keys[i];
 var control = obj[id].controllerID;
 var date= obj[id].DateDiff;
 var cycle= obj[id].CycleTime;
 //make html here using this data
}