creating a json file and display them

Question

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.

Rijwan Ansari · Answer

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 var cell = row.insertCell(); cell.appendChild(document.createTextNode(keys[i])); } } var table = document.createElement( 'table' ); for ( var i = 0; 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);

Satya Karki · Answer

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 > null p > td > "; } } row+=" tr > " table_rows+=row; } table_rows+=' tbody > '; document.getElementById("tableID").innerHTML+=table_rows; } script >

geetha geetha · Answer

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" > Here we want to dispaly the employee name from our json file: get the element from the body, var mainContainer = document.getElementById( "empData" ); Next step is to create a simple loop. We can then get every object in our list of JSON object and append it into our main div. Here after you need to create a new div element and fill dive by name. After you append to the main container. function appendData(data) { var mainContainer = document.getElementById( "empData" ); for ( var i = 0; i var div = document.createElement( "div" ); div.innerHTML = 'EmployeeName: ' + data[i].firstName + ' ' + data[i].lastName; mainContainer.appendChild(div); } } After you can run the index file it displays the all employees name.

kiranmai kamale · Answer

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

kiranmai kamale · Answer

@sachin singh I need using javascript not jquery

Sachin Singh · Answer

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

creating a json file and display them

Answers (6)