Как заполнить данные 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); 
}); 

дайте мне знать, если он работает для вас.