Question

我在这里发布这个问题之前想了10次。我知道它已经覆盖了这个主题一千次了，但我仍然坚持这个问题..

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

你会怎么做？

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

使用以下代码生成html

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因为你已经标记了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 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>

如何为对象创建自动div？

3 个答案: