jquery通过json数组循环

嗨，我有一个JSON数组，看起来像这样。jquery通过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

我该如何实现这一目标？

来源

2015-04-07 Josh Kirkpatrick

不是一个JSON阵！ –

您是否已经拥有DIV或者是否应该创建DIV？另外，你有什么尝试？我们不完全是代码编写服务。 – Tomalak

你需要一个HTML字符串作为输出吗？ –

通过它下面的工作对我来说

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

来源

2015-04-07 11:43:11 Butterfly

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

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

来源

2015-04-07 11:40:30

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 
}

来源

2015-04-07 11:41:22 mkaminsky

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

来源

2015-04-07 11:48:21

虽然你有一个对象，并不是数组，你仍然可以使用jQuery的$.each函数。函数可以接受一个对象。回调是一对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; 
 
}

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

来源

2015-04-07 11:50:19

jquery通过json数组循环

回答

相关问题