JavaScriptでのJSONデータの解析

Question

JSONの新機能です。サーバーから取得したJSONファイルは、以下のようになります。

{ success: true, 
    message: null, 
    result: 
    { employee1: 
     { name: 'Herry B', 
     abbr: 'Hb', 
     age: 43, 
     salary: 13473.50, 
     address: 'xxxdrer43erered drdre' }, 
    employee2: 
     { name: 'Sam R', 
     abbr: 'Sr', 
     age: 41, 
     salary: 2561.52, 
     address: 'fdre43n43 43h43 fd' }, 
    employee3: 
     { name: 'Rita H', 
     abbr: 'Rh', 
     age: 37, 
     salary: 36923.43, 
     address: 'dsfaz34n3 343z4 3' }, 
    employee4: 
     { name: 'Suman B', 
     abbr: 'Sb', 
     age: 25, 
     salary: 1942.45, 
     address: 'dfasru34 343r ' } 
    } 
} 

は、私のように見える、以下のAJAXを持っている：

function() { 
     var jsonData = $('#json-data'); 

     var employeeData = "https://amstar.eu/employee_data"; 
     $.getJSON(employeeData, { 
      format: "json" 
     }) 
     .done(function(data) { 

      jsonData.empty(); 

      var output = "<div><table border=\"1\"> <tr> <th>Name</th> <th>Abbr</th> <th>Age</th> <th>Salary</th> <th>Address</th> <tr></tr>" 

      for(row in data.result) 
      { 
      ........ 

      output += '<tr></tr>'; 
      } 
      output += '</tr> </table> </div>'; 

      jsonData.innerHTML(output); 
      }); 
    }) 

問題がどこにあるか、 "........" の部分があります。データの処理方法を進めることはできません。 行は私に "employee1"、 "employee2"、...を与えますが、各従業員の詳細を取得して印刷する方法はわかりません。

誰かがここに助けてもらえますか？

Answer 1

JSONオブジェクトのプロパティにアクセスし、それらをHTMLに書き込む必要があります。

など。 employee1.name。

は何かなどを試してみてください...

"<TD>" + row.name + "</TD><TD>" + row.abbr" + </TD> 

は、連結文字列へのよりよい解決策がありますが、これはまだ動作するはずです。

Answer 2

ES6 template literalsは、ここで簡単にすることができます。ネストされたループの必要はありません！

1）map jQueryが解析したJSオブジェクトに対して、テーブルを埋めるために必要な行を返します。

const rows = Object.keys(result).map(e => { 
    return `<tr><td>${result[e].name}</td><td>${result[e].abbr}</td><td>${result[e].age}</td><td>${result[e].salary}</td><td>${result[e].address}</td></tr>`; 
}); 

2）テーブルに行を追加します。

const table = `<table><tr><th>Name</th><th>Abbr</th><th>Age</th<th>Salary</th><th>Address</th><tr></tr>${rows}</table>`; 

3）HTMLをページに追加します。

jsonData.innerHTML = table; 

DEMO

Answer 3

あなたはinsertRowとinsertCell方法と共に、ネストされたfor loopsを使用してかなり簡単にそれを行うことはできません：jQueryのための必要性を。

1. ネストされたオブジェクトがあるため、人の詳細を取得するにはfor loopsをネストする必要があります。

2. 次に、forループを使用してテーブル行を生成できます。有効なJSONではありません

   for (var row in data.result) { 
       //insert new row for each employee 
       var table_row = table.insertRow(-1); 
       console.log('row:', row); 
       for (var details in data.result[row]) { 
        //insert new cell for every employee detail 
        var table_cell = table_row.insertCell(-1); 
        table_cell.innerText = data.result[row][details]; 
       } 
   }