NEWS: Total Picture Views: 155283 | Total Article Views: 165632 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. PickUpThings with Becker Robot | 3. How to read a JSON and work with it | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Reading JSON File And Display It Into A Table Javascript


In this example I will be showing how to read and display a json file into a table.

You can view the example here: LINK


<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JSON Example</title>
    <script type="text/javascript">
        function readJSON(){
            var xml = new XMLHttpRequest();
  "GET", "data.json", true);
            xml.onreadystatechange = function(){
              if(xml.readyState == 4 && xml.status == 200){
                  var data = JSON.parse(xml.responseText);
                  var out = document.getElementById("output");
                  var info = "";
                  info +=("<table border='1'><tr><th>Name</th><th>Age</th><th>Address</th></tr>")
                  for(var object in data){
                      info += "<tr><td>" + data[object].name + "</td><td>" + data[object].age + "</td><td>" + data[object].address + "</td></tr>";
                  info +=("</table>");
                  out.innerHTML = info;
<body onload="readJSON()">
    <div id="output">


<!--  data.json-->
  "ul1": {"name": "John", "age" : 35, "address": "Brampton"},
  "ul2": {"name": "Carl", "age" : 25, "address": "Oakville"},
  "ul3": {"name": "Mark", "age" : 15, "address": "Mississauga"},
  "ul4": {"name": "Tyler", "age" : 48, "address": "Toronto"}
Attachments: None

Tags: JSON Table Function

Total Views: 912

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 04/08/15


Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.