Question

嗨，我有一个看起来像这样的JSON数组。

 {
 "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"
 }
}

我想要做的是为数组中的每个元素将数据放入一个看起来像这样的DIV

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

如果数组的编号对应于DIV ID，则对于此示例 id为28C的div的值为-52

我怎样才能实现这一目标？

Answer 1

下面为我工作

<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

这是对象，不是数组，但你可以使用for循环

来完成它

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

虽然您有一个Object而不是一个Array，但您仍然可以使用jQuery的$.each函数。 jQuery.each( object, callback )函数可以接受一个对象。回调是key - value对。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

jquery通过json数组循环

5 个答案: