Question

这是我的档案

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

我需要显示第一个对象的所有项目，然后是第二个对象的所有项目，依此类推......标题。

如何修改我的表以便显示这样的输出？如果有人知道，请帮忙。

我已将此https://plnkr.co/edit/6qaZMZ0IkhOA2jQxCfBo?p=catalogue

附加了plunker链接

Answer 1

使用你的数据，我创建了一个包含字符串的表，所以... 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>

我需要以title格式显示这种格式的json数据。如何做到这一点？

1 个答案: