この形式のjsonデータをtitlesで表示する必要があります。これを行うにはどうすればいいですか？

これは私のファイルこの形式のjsonデータをtitlesで表示する必要があります。これを行うにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post"> 

<fieldset> 
    <h4>Upload Json File</h4> 
    <input type='file' id='fileinput'> 
    <input type='button' id='btnLoad' value='Load' onclick='loadFile();'> 
</fieldset> 
</form> 


<script type="text/javascript"> 

    function loadFile() { 
    var input, file, fr; 

    if (typeof window.FileReader !== 'function') { 
     alert("The file API isn't supported on this browser yet."); 
     return; 
    } 

    input = document.getElementById('fileinput'); 
    if (!input) { 
     alert("Um, couldn't find the fileinput element."); 
    } 
    else if (!input.files) { 
     alert("This browser doesn't seem to support the `files` property of file inputs."); 
    } 
    else if (!input.files[0]) { 
     alert("Please select a file before clicking 'Load'"); 
    } 
    else { 
     file = input.files[0]; 
     fr = new FileReader(); 
     fr.onload = receivedText; 
     fr.readAsText(file); 
    } 

    function receivedText(e) { 
     lines = e.target.result; 
     var newArr = JSON.parse(lines); 
     var table = document.getElementById("displayTable"); 

    for (var i = 0; i < newArr.length; i++) { 
      var row = table.insertRow(i); 
      var cell = row.insertCell(0); 
      cell.innerHTML = newArr[i].A; 

      var row1 = table.insertRow(i+1); 
      var cell1= row1.insertCell(0); 
      cell1.innerHTML = newArr[i].B; 

      var row2 = table.insertRow(i+2); 
      var cell2 = row2.insertCell(0); 
      cell2.innerHTML = newArr[i].C; 

      var row3 = table.insertRow(i+3); 
      var cell3 = row3.insertCell(0); 
      cell3.innerHTML = newArr[i].D; 

      var row4 = table.insertRow(i+4); 
      var cell4 = row4.insertCell(0); 
      cell4.innerHTML = newArr[i].E; 

      var row5 = table.insertRow(i+5); 
      var cell5 = row5.insertCell(0); 
      cell5.innerHTML = newArr[i].F; 

      var row6 = table.insertRow(i+6); 
      var cell6 = row6.insertCell(0); 
      cell6.innerHTML = newArr[i].G; 

    } 
    } 
    } 

</script> 
<h1>JSON</h1> 

    <table id="displayTable"> 

     </table> 

    <div id="showData" ></div> 


    </body> 

</html>

これは私のJSONファイル

[{ 
    "A": "aaaa", 
    "B": "bbbb", 
    "C": "cccc", 
    "D": "dddd", 
    "E": "eeee", 
    "F": "ffff", 
    "G": "gggg" 
}, { 
    "A": "aaaa1", 
    "B": "bbbb1", 
    "C": "cccc1", 
    "D": "dddd1", 
    "E": "eeee1", 
    "F": "ffff1", 
    "G": "gggg1" 
}, 
{ 
    "A": "aaaa2", 
    "B": "bbbb2", 
    "C": "cccc2", 
    "D": "dddd2", 
    "E": "eeee2", 
    "F": "ffff2", 
    "G": "gggg2" 
}, 
{ 
    "A": "aaaa3", 
    "B": "bbbb3", 
    "C": "cccc3", 
    "D": "dddd3", 
    "E": "eeee3", 
    "F": "ffff3", 
    "G": "gggg3" 
} 
]

私はJSONファイルを表示した場合、それはこのような出力が表示されますであり、これは間違っています。

JSON 

aaaa 
aaaa1 
aaaa2 
aaaa3 
bbbb3 
cccc3 
dddd3 
eeee3 
ffff3 
gggg3 
bbbb2 
cccc2 
dddd2 
eeee2 
ffff2 
gggg2 
bbbb1 
cccc1 
dddd1 
eeee1 
ffff1 
gggg1 
bbbb 
cccc 
dddd 
eeee 
ffff 
gggg

私は以下のような出力を表示する必要があります。

A 
    aaaa 
    B 
    bbbb 
    C 
    cccc 
    D 
    dddd 
    E 
    eeee 
    F 
    ffff 
    G 
    gggg 
    A 
    aaaa1 
    B 
    bbbb1 
    C 
    cccc1 
    D 
    dddd1 
    E 
    eeee1 
    F 
    ffff1 
    G 
    gggg1

私はタイトルで...ので、上のすべての最初のオブジェクトの項目、最初の2番目のオブジェクトのすべての項目とを表示する必要があります。

このような出力が表示されるようにテーブルを変更するにはどうすればよいですか？誰でも知っているなら、助けてください。

私はあなたのデータを使用して、このhttps://plnkr.co/edit/6qaZMZ0IkhOA2jQxCfBo?p=catalogue

出典

2016-12-17 radiance88

でplunkerリンクを添付している、私はそう... Arはそれであなたのデータを持つ配列の名前である文字列を持つテーブルを作成しました。

 var dis = "" 
     for (var i = 0; i < ar.length; i++) { 

      var aset = ar[i]; 
      var keys = Object.keys(aset) 
      for (j = 0; j < keys.length; ++j) { 
       dis += "<tr><td>" + keys[j] + "</td></tr>"; 
       dis += "<tr><td>" + aset[keys[j]] + "</td></tr>"; 

      } 

     } 
     document.getElementById("tbl").innerHTML = dis;

と

 <table id="tbl"></table>

出典

2016-12-17 09:39:02 Bindrid

私jsfiddleでそれを立ち往生：https://jsfiddle.net/bindrid/cm23k3m1/1/ – Bindrid

この形式のjsonデータをtitlesで表示する必要があります。これを行うにはどうすればいいですか？

答えて

関連する問題