如何爲對象創建自動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>