如何在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); 
}); 

讓我知道它是否適合你。