jquery循环遍历json数组答案

【问题标题】：jquery Looping through json arrayjquery循环遍历json数组
【发布时间】：2015-04-15 20:36:11
【问题描述】：

您好，我有一个如下所示的 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

我怎样才能做到这一点？

【问题讨论】：

您是否已经拥有 DIV 还是应该创建它？另外，你试过什么？我们不完全是一个代码编写服务。
您需要一个 HTML 字符串作为输出？
@Mr.Polywhirl JSON 对象，但是当你想纠正某人时，你应该把它放在你的评论中......：D

标签： javascript jquery json

【解决方案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>

【讨论】：

【解决方案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]);
}

【讨论】：

【解决方案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); 
});

【讨论】：

【解决方案4】：

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

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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
}

【讨论】：