如何为对象创建自动div？

Question

在我发布这个问题之前，我想过10次。我知道这是一千次涉及这个问题，但我坚持这个问题..

我有这个JSON创建一个PHP脚本，我必须取它div class="data"内，以创建每个子divs每个元素和<hr>为每个对象。

你会怎么做？

这里是我的JSON：预期结果的

[ 
{ 
id_sensors: "1", 
name: "First sensor", 
value: "10", 
status: "1", 
battery: "100" 
}, 
{ 
id_sensors: "2", 
name: "Second sensor", 
value: "11", 
status: "1", 
battery: "99" 
} 
] 

例如：

<div class="data"> 
    <div class="id_sensor"> 1 </div> 
    <div class="name"> First sensor </div> 
    <div class="value"> 10 </div> 
    <div class="status"> 1 </div> 
    <div class="battery"> 100 </div> 
    <hr> 
    <div class="id_sensor"> 2 </div> 
    <div class="name"> Second Sensor </div> 
    <div class="value"> 11 </div> 
    <div class="status"> 1 </div> 
    <div class="battery"> 99 </div> 
</div> 

Answer 1

为您所标记的jQuery的，这里是我的解决方案（未经测试）

$.each(json_array, function(key, val){//iterate array 
    $.each(val, function(key, val){//for each array element (in this case, an object) again iterate thru object property name(key) and value 
    $(".data").append('<div class="'+key+'">'+value);//make a div appropriately 
    }); 
    $(".data").append('<hr>');//then insert an <hr> after it 
}); //you may want a logic to prevent the last <hr> being drawn 

编辑：由于其他一些人制作和测试了与我所做的几乎相同的事情，因此我继续完成代码。 http://jsfiddle.net/p98pp6za/和小提琴

var json_array = [{id_sensors: "1",name: "First sensor",value: "10",status: "1",battery: "100"},{id_sensors: "2",name: "Second sensor",value: "11",status: "1",battery: "99"}]; 

$.each(json_array, function(k, v){//iterate array 
    $.each(v, function(key, val){//for each array element (in this case, an object) again iterate thru object property name(key) and value 
    $(".data").append('<div class="'+key+'">'+val);//make a div appropriately 
    }); 
    if(json_array[k+1])$(".data").append('<hr>');//then insert an <hr> after it (but not the last one) 
}); 

请注意，这个解决方案应该提供更可靠的方法，并能够处理几乎任何对象名称/值对，比其他解决方案提供了这个问题。下面的代码

Answer 2

使用生成html

var str = '[{ "id_sensors": "1", "name": "First sensor","value": "10","status": "1","battery": "100"},{"id_sensors": "2","name": "Second sensor","value": "11","status": "1","battery": "99"}]'; 
 

 
var arr = $.parseJSON(str); 
 
var temp = ''; 
 
$.each(arr, function(index,value){ 
 
    
 
    temp += '<div class="id_sensor">'+ value.id_sensors + 
 
      '</div><div class="name">'+ value.name + 
 
      '</div><div class="value">'+value.value + 
 
      '</div><div class="status">'+ value.status+ 
 
      '</div><div class="battery"> '+value.battery+ 
 
      '</div><hr>'; 
 
}); 
 

 
var desireHtml = '<div class="data">'+temp+'</div>'; 
 

 
alert(desireHtml);

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

Answer 3

只是试试这个，

var myJSON = [ 
 
{ 
 
id_sensors: "1", 
 
name: "First sensor", 
 
value: "10", 
 
status: "1", 
 
battery: "100" 
 
}, 
 
{ 
 
id_sensors: "2", 
 
name: "Second sensor", 
 
value: "11", 
 
status: "1", 
 
battery: "99" 
 
} 
 
]; 
 

 
$.each(myJSON,function(i,val){ 
 
    $.each(val,function(index,val){ 
 
     $(".data").append('<div class="'+index+'">'+val); 
 
    }); 
 
    if((i+1) != myJSON.length){ 
 
     $(".data").append('<hr>'); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="data"> 
 
    </div>