如何在JSON数据中循环

Question

我有一个类似于下面的JSON数据文件，我想将utility下的所有对象加载到表中，但我甚至无法将第一行加载到表中！

你可以看看这个，让我知道我做错了什么吗？以及我如何循环槽全部utility对象并加载它们在一个单独的表<tr>

var data = { 
 
    "utility": { 
 
    "Water": { 
 
     "account": "99999", 
 
     "balance": "5555", 
 
     "owner": "Fred" 
 
    }, 
 

 
    "Phone": { 
 
     "account": "7777", 
 
     "balance": "6666", 
 
     "owner": "Mark" 
 
    }, 
 

 
    "Power": { 
 
     "account": "A9885", 
 
     "balance": "2222", 
 
     "owner": "Suzan" 
 
    } 
 
    }, 
 

 
    "clients": { 
 
    "David": { 
 
     "account": "99999", 
 
     "balance": "5555", 
 
     "Date": "Jan 11" 
 
    }, 
 

 
    "George": { 
 
     "account": "7777", 
 
     "balance": "6666", 
 
     "Date": "March 22" 
 
    }, 
 

 
    "Marco": { 
 
     "account": "A9885", 
 
     "balance": "2222", 
 
     "Date": "Feb 25" 
 
    } 
 
    } 
 

 
} 
 

 
var obj = JSON.parse(data); 
 
$(".container").append(
 
    '<table class="table table-hover"><tr><td>' + 
 
    obj.Water.account + 
 
    '</td><td>99999</td><td>5555</td><td>Fred</td></tr></table>' 
 
);

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

Answer 1

一旦你解析JSON的，它只是一个标准的对象。遍历它这样：

// Loop through the utility property: 
for(var p in data.utility){ 

    // Loop through the properties of the utility property: 
    for(var p2 in data.utility[p]){ 
     var row = document.createElement("tr"); 

     // Loop through the properties of the found property 
     for(var p3 in data.utility[p][p2]){ 
      var cell - document.createElement("td"); 
      cell.innerHTML = p3 + " = " + data.utility[p][p2][p3]; 
     } 
     row.appendChild(cell); 
    } 
    // Use appendChild to append row to table. 
} 

Answer 2

请从MDN阅读文章，因为它描述的方法之间的区别：

• 的for..in
• Object.keys
• Object.getOwnPropertyNames
• Object.getOwnPropertyDescriptors

另外看看该方法：

• Object.keys()

的Object.keys（）方法返回在给定对象的自己的枚举的属性的阵列，以相同的顺序作为由为...提供循环（区别在于for-in循环枚举了原型链中的属性）。从MDN

实例：

var arr = ['a', 'b', 'c']; 
console.log(Object.keys(arr)); // console: ['0', '1', '2'] 

// array like object 
var obj = { 0: 'a', 1: 'b', 2: 'c' }; 
console.log(Object.keys(obj)); // console: ['0', '1', '2'] 

// array like object with random key ordering 
var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; 
console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] 

// getFoo is property which isn't enumerable 
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); 
my_obj.foo = 1; 

console.log(Object.keys(my_obj)); // console: ['foo'] 

• Object.getOwnPropertyNames()

的Object.getOwnPropertyNames（）方法返回所有属性的阵列（枚举或不）直接发现在给定的对象。从MDN

例子：

var arr = ['a', 'b', 'c']; 
console.log(Object.getOwnPropertyNames(arr).sort()); 
// logs ["0", "1", "2", "length"] 

// Array-like object 
var obj = { 0: 'a', 1: 'b', 2: 'c' }; 
console.log(Object.getOwnPropertyNames(obj).sort()); 
// logs ["0", "1", "2"] 

// Logging property names and values using Array.forEach 
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) { 
    console.log(val + ' -> ' + obj[val]); 
}); 
// logs 
// 0 -> a 
// 1 -> b 
// 2 -> c 

// non-enumerable property 
var my_obj = Object.create({}, { 
    getFoo: { 
    value: function() { return this.foo; }, 
    enumerable: false 
    } 
}); 
my_obj.foo = 1; 

console.log(Object.getOwnPropertyNames(my_obj).sort()); 
// logs ["foo", "getFoo"] 

Answer 3

希望这是你如何想。告诉我你是否想要改进。

var data = 
 
    { 
 
    "utility": { 
 
       "Water": { 
 
        "account": "99999", 
 
        "balance": "5555", 
 
        "owner": "Fred" 
 
       }, 
 
       
 
       "Phone": { 
 
        "account": "7777", 
 
        "balance": "6666", 
 
        "owner": "Mark" 
 
       }, 
 
        
 
       "Power": { 
 
        "account": "A9885", 
 
        "balance": "2222", 
 
        "owner": "Suzan" 
 
       } 
 
    }, 
 
     
 
    "clients": { 
 
       "David": { 
 
        "account": "99999", 
 
        "balance": "5555", 
 
        "Date": "Jan 11" 
 
       }, 
 
       
 
       "George": { 
 
        "account": "7777", 
 
        "balance": "6666", 
 
        "Date": "March 22" 
 
       }, 
 
        
 
       "Marco": { 
 
        "account": "A9885", 
 
        "balance": "2222", 
 
        "Date": "Feb 25" 
 
       } 
 
    } 
 
    
 
} 
 

 
var utils = data.utility; 
 
var tableStr=''; 
 
$.each(utils,function(key,value){ 
 
    tableStr +="<tr>"; 
 
    tableStr +="<td>"+key+"</td>"; 
 
    $.each(value,function(k,v){ 
 
     tableStr +="<td>"+k+"</td><td>"+v+"</td>"; 
 
    }); 
 
    tableStr +="</tr>"; 
 
}); 
 
$("#tbl").html(tableStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="table table-hover" id="tbl"> 
 
    </table> 
 
</div>

Answer 4

当您添加jQuery的标签，我提供你这个办法：

//if you have a JSON (string) 
    //var obj = JSON.parse(data); 

    var prop1, prop2, inner, 
     $table = $('<table>').addClass('table table-hover'), 
     $tr, $td; 

    //loop over 'utility' properties 
    for (prop1 in data.utility) { 
    $tr = $('<tr>'); 
    inner = data.utility[prop1]; 
    for (prop2 in inner) { 
     $td = $('<td>').text(inner[prop2]).appendTo($tr); 
    } 
    $tr.appendTo($table); 
    } 

    $table.appendTo(".container"); 

Answer 5

如上面提到的，你不需要分析你的数据。 所以这个段应为你做它：

//just use you data array you have above. 
jQuery(document).ready(function(){ 
    var result = "<table>"; 
    for (var item in data.utility) { 
     result += "<tr><td>" + item + ":</td>"; 
     console.log(item); 
     for (var subItem in data.utility[item]) { 
      result += "<td>" + data.utility[item][subItem] + "</td>"; 
     } 
     result += "</tr>"; 
    } 
    result+="</table>"; 
    jQuery(".container").append(result); 
}); 

让我知道它是否适合你。