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?

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. — Tomalak
– Tomalak, Commented Apr 7, 2015 at 11:29
@Mr.Polywhirl JSON object, but you should put that in your comment for when you want to correct someone... :D — Cayce K
– Cayce K, Commented Apr 7, 2015 at 12:01

Anto S · Accepted Answer · 2015-04-07 11:43:11Z

4

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>

answered Apr 7, 2015 at 11:43

Anto S

2,4576 gold badges35 silver badges52 bronze badges

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

Comments

Aleksandar Gajic · Accepted Answer · 2015-04-07 11:40:30Z

1

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

answered Apr 7, 2015 at 11:40

Aleksandar Gajic

1,3591 gold badge18 silver badges23 bronze badges

Comments

Amitesh Yadav · Accepted Answer · 2015-04-07 11:48:21Z

1

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

answered Apr 7, 2015 at 11:48

Amitesh Yadav

3121 silver badge11 bronze badges

Comments

Mr. Polywhirl · Accepted Answer · 2015-04-07 11:56:06Z

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>

mkaminsky · Accepted Answer · 2015-04-07 11:41:22Z

0

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
}

answered Apr 7, 2015 at 11:41

mkaminsky

3532 silver badges10 bronze badges

Collectives™ on Stack Overflow

jquery Looping through json array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related