I need to display the json data in this format with titles.How to do this?

Question

I need to display the json data in this format with titles.How to do this?

141 views Asked by AudioBubble At 17 December 2016 at 08:55

This is my file

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

This is my json file

[{
    "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"
}
]

If I display my JSON file, it will show output like this and this is wrong.

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 need to show output like below:

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 need to display all the items of first object,first then all items of second object and so on... with titles.

How to modify my table so that it will show output like this? If anyone knows, please do help.

I have attached plunker link with this https://plnkr.co/edit/6qaZMZ0IkhOA2jQxCfBo?p=catalogue

Original Q&A

There are 1 answers

**Bindrid** · Answer 1 · 2016-12-17 09:39:02

Using your data, I created a table with strings so... ar is the name of the array with your data in it.

        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;

and stuck it in

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

TechQA.

I need to display the json data in this format with titles.How to do this?

There are 1 answers

Related Questions in HTML

Related Questions in JSON

Related Questions in DYNAMIC-TABLES

Popular Questions

Popular Tags

Trending Questions