如何为对象创建自动div？

问题描述

在这里发布这个问题之前，我想过10次。 我知道这是本主题的1000倍，但我一直在解决这个问题。

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

你会怎么做？

这是我的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>

如标记了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

编辑：由于其他许多人都做了和测试与我几乎相同的事情，所以我继续完成了代码。 和一个小提琴

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

请注意，与为该问题提供的其他解决方案相比，该解决方案应提供更可靠的方法，并且能够处理几乎任何对象名称/值对。

试试这个。，

 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>