제목이있는이 형식의 json 데이터를 표시해야합니다. 어떻게해야합니까?

이 내 파일제목이있는이 형식의 json 데이터를 표시해야합니다. 어떻게해야합니까?

<!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

는 I는 아래와 같은 출력을 표시해야

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

I 타이틀과 제 모든 제 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

답변

관련 문제