creating a json file and display them

I need the html webpage and then create a json file and read the values in the javascript and display them in the table on the page.

To read date from file and generate table.

<div id="content">
<input type="file" name="inputfile" id="inputfile">
<br>
<table id="tableID" class="table">table>
div>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
jsonToTable(parsedJSON);
console.log(parsedJSON);
// your code to consume the json
}
fileReader.readAsText(this.files[0]);
})
function jsonToTable(json) {
var parsejson=JSON.parse(json);
var columns=[];
var tablethread="";
for (x in parsejson[0]) {
columns.push(x);
tablethread+="<th>"+x+"th>";
}
tablethread+="tr>thead>";
document.getElementById("tableID").innerHTML=tablethread;
var table_rows='';
for (var i = 0; i < parsejson.length; i++) {
var x= parsejson[i];
var json2=x;
var row=""
for (d in x) {
var sty=x[d];
if (sty!=null) {
var st=sty.toString();
var reps='<\\';
row+="<td><p>"+st.split('<').join('<')+"p>td>";
}
else {
row+="<td><p>nullp>td>";
}
}
row+="tr>"
table_rows+=row;
}
table_rows+='tbody>';
document.getElementById("tableID").innerHTML+=table_rows;
}
script>

Hi Try this.

<input type="file" id="get_the_file">

Read file js

var children;
document.getElementById("get_the_file").addEventListener("change", function() {
var file_to_read = document.getElementById("get_the_file").files[0];
var fileread = new FileReader();
fileread.onload = function(e) {
var content = e.target.result;
// console.log(content);
children = JSON.parse(content); // Array of Objects.
console.log(intern); // You can index every object
};
fileread.readAsText(file_to_read);
});

Generate Table

<div id="container">div>

function addHeaders(table, keys) {
var row = table.insertRow();
for( var i = 0; i < keys.length; i++ ) {
var cell = row.insertCell();
cell.appendChild(document.createTextNode(keys[i]));
}
}
var table = document.createElement('table');
for( var i = 0; i < children.length; i++ ) {
var child = children[i];
if(i === 0 ) {
addHeaders(table, Object.keys(child));
}
var row = table.insertRow();
Object.keys(child).forEach(function(k) {
console.log(k);
var cell = row.insertCell();
cell.appendChild(document.createTextNode(child[k]));
})
}
document.getElementById('container').appendChild(table);

We need to create a json file and fetch the data from javascript after that diaplaying value in html page.

Here I mention the code for your refernce,

At first we need to create a json file and add the employee details.

employee.json:

[
{
"employeeid": "1",
"firstName": "Geetha",
"lastName": "V"
},
{
"employeeid": "2",
"firstName": "Daril",
"lastName": "Jasper"
},
{
"employeeid": "3",
"firstName": "Vinitha",
"lastName": "T"
}
]

You can also save this data in index.html file also.

Fetching the data from json:

fetch function helps to getting the data from our json file, by using append function which will helps tho where we created the code which will append data to our page.We use catch function for errorhandling.

fetch('people.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log(err);
});

Before display our json data to the webpage we should know the body of html fie:

"empData">

I need a seperate json file for the below attached html page.

@sachin singh I need using javascript not jquery

You can do it like this

suppose your json file is something as below (array of json object)

[{"id":1,"name":"sachin"},{"id":2,"name":"Singh"}];

then you can read it in table as

function getArray(){
return $.getJSON('yourFileName.json');
}

var data=getArray();
$(data).each(function(i, item)
{
var tr=document.createElement("tr");
$(tr).append(""+(item.id+"").append(""+ item.name+"");
$("#tbl").append(tr);
})

html

"tbl">

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Satya Karki4y ago
To read date from file and generate table.
<div id="content">
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <table id="tableID" class="table">table>
div>
<script type="text/javascript">
document.getElementById('inputfile')
        .addEventListener('change', function () {

            let fileReader = new FileReader();
            fileReader.onload = function () {
                let parsedJSON = JSON.parse(fileReader.result);
        jsonToTable(parsedJSON);
                console.log(parsedJSON);
                // your code to consume the json
            }
            fileReader.readAsText(this.files[0]);
        })

function jsonToTable(json) {
  var parsejson=JSON.parse(json);
  var columns=[];
  var tablethread="";
  for (x in parsejson[0]) {
    columns.push(x);
    tablethread+="<th>"+x+"th>";
  }
  tablethread+="tr>thead>";
  document.getElementById("tableID").innerHTML=tablethread;
  var table_rows='';
  for (var i = 0; i < parsejson.length; i++) {
    var x= parsejson[i];
      var json2=x;
      var row=""
        for (d in x) {
          var sty=x[d];
          if (sty!=null) {
            var st=sty.toString();
            var reps='<\\';
            row+="<td><p>"+st.split('<').join('<')+"p>td>";
          }
          else {
            row+="<td><p>nullp>td>";
          }
        }
      row+="tr>"
      table_rows+=row;
  }
  table_rows+='tbody>';
  document.getElementById("tableID").innerHTML+=table_rows;
}
script>
Rijwan Ansari4y ago
Hi Try this.
<input type="file" id="get_the_file">
Read file js
var children;
document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    children = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});
Generate Table
<div id="container">div>
function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var table = document.createElement('table');
for( var i = 0; i < children.length; i++ ) {

  var child = children[i];
  if(i === 0 ) {
    addHeaders(table, Object.keys(child));
  }
  var row = table.insertRow();
  Object.keys(child).forEach(function(k) {
    console.log(k);
    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('container').appendChild(table);
geetha geetha4y ago
We need to create a json file and fetch the data from javascript after that diaplaying value in html page.
Here I mention the code for your refernce,
At first we need to create a json file and add the employee details.
employee.json:
[
    {
        "employeeid": "1",
        "firstName": "Geetha",
        "lastName": "V"
    },
    {
        "employeeid": "2",
        "firstName": "Daril",
        "lastName": "Jasper"
    },
    {
        "employeeid": "3",
        "firstName": "Vinitha",
        "lastName": "T"
    }
]
You can also save this data in index.html file also.
Fetching the data from json:
fetch function helps to getting the data from our json file, by using append function which will helps tho where we created the code which will append data to our page.We use catch function for errorhandling.
fetch('people.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    console.log(err);
  });
Before display our json data to the webpage we should know the body of html fie:
  "empData">