Json Parsing using Javascript

In this post we parse a json file display the content of that file in a html page. Here we parse the file using javascript's function JSON.parse()

Here is the Json file we used:

[
  {
    "_id": "5582f8f983abbf96aff0867f",
    "index": 0,
    "guid": "431562f6-3197-4aad-8d85-165a6b28c1bf",
    "isActive": false,
    "balance": "$1,945.59",
    "picture": "http://placehold.it/32x32",
    "age": 36,
    "eyeColor": "blue",
    "name": "Norma White",
    "gender": "female",
    "company": "MAZUDA",
    "email": "normawhite@mazuda.com",
    "phone": "+1 (886) 518-2133",
    "address": "162 Vernon Avenue, Clayville, South Carolina, 9710",
    "about": "Minim elit tempor dolor pariatur ex irure officia 
reprehenderit proident excepteur ea in in non. Consequat 
eiusmod nostrud dolore reprehenderit eu laborum sunt. Eiusmod 
nostrud cillum officia elit et incididunt incididunt commodo 
dolore non. In minim nisi in id commodo ut.\r\n",
    "registered": "2015-06-02T01:21:13 -06:-30",
    "latitude": -50.456627,
    "longitude": -140.03817,
    "tags": [
      "dolor",
      "elit",
      "ipsum",
      "Lorem",
      "laboris",
      "sint",
      "aliqua"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Maribel Wheeler"
      },
      {
        "id": 1,
        "name": "Letha Reid"
      },
      {
        "id": 2,
        "name": "Jenkins Mcbride"
      }
    ],
    "greeting": "Hello, Norma White! You have 4 unread 
messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5582f8f9cc0397850d491ea2",
    "index": 1,
    "guid": "7f980900-413b-4647-8254-ffb70fe5d394",
    "isActive": false,
    "balance": "$3,427.90",
    "picture": "http://placehold.it/32x32",
    "age": 34,
    "eyeColor": "green",
    "name": "Delores Cash",
    "gender": "female",
    "company": "INFOTRIPS",
    "email": "delorescash@infotrips.com",
    "phone": "+1 (934) 465-3926",
    "address": "602 Tudor Terrace, Croom, Alaska, 3367",
    "about": "Ex incididunt incididunt dolore sunt non aliqua 
exercitation aute elit ad ex. Non irure sunt excepteur ex et id 
nisi ipsum adipisicing nisi. Non aliquip nulla ullamco ullamco 
anim fugiat ullamco dolore magna reprehenderit mollit tempor 
fugiat.\r\n",
    "registered": "2014-03-30T11:28:04 -06:-30",
    "latitude": 20.412092,
    "longitude": -24.360202,
    "tags": [
      "adipisicing",
      "qui",
      "aute",
      "consequat",
      "incididunt",
      "sunt",
      "do"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Cherry Giles"
      },
      {
        "id": 1,
        "name": "Liz Brooks"
      },
      {
        "id": 2,
        "name": "Estela Thompson"
      }
    ],
    "greeting": "Hello, Delores Cash! You have 2 unread 
messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5582f8f952fc2e8172d3d49f",
    "index": 2,
    "guid": "f456df49-1082-4cd1-a989-08f580b8a39f",
    "isActive": false,
    "balance": "$3,487.59",
    "picture": "http://placehold.it/32x32",
    "age": 28,
    "eyeColor": "blue",
    "name": "Cortez Thomas",
    "gender": "male",
    "company": "SPLINX",
    "email": "cortezthomas@splinx.com",
    "phone": "+1 (954) 590-3960",
    "address": "801 Roosevelt Court, Vale, Ohio, 9448",
    "about": "Consequat dolor aliqua do minim ipsum minim elit 
sint minim minim sit dolor. Id et cupidatat esse consectetur 
voluptate id cillum non excepteur laboris laboris anim do 
aliqua. Dolor nisi labore ea ipsum enim magna ea tempor eiusmod 
id. Esse occaecat aliquip laborum officia duis laboris 
nisi.\r\n",
    "registered": "2014-10-29T07:15:24 -06:-30",
    "latitude": 4.709781,
    "longitude": 73.445115,
    "tags": [
      "excepteur",
      "incididunt",
      "eu",
      "non",
      "proident",
      "sit",
      "nisi"
    ],
   
    "greeting": "Hello, Cortez Thomas! You have 3 unread 
messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5582f8f94359b04b61961764",
    "index": 3,
    "guid": "642c9764-f136-43fa-b9ee-c9fbdb14f5db",
    "isActive": true,
    "balance": "$3,932.63",
    "picture": "http://placehold.it/32x32",
    "age": 23,
    "eyeColor": "brown",
    "name": "Christine Levine",
    "gender": "female",
    "company": "HELIXO",
    "email": "christinelevine@helixo.com",
    "phone": "+1 (966) 487-3878",
    "address": "757 Imlay Street, Summerset, Utah, 169",
    "about": "Exercitation ad nostrud enim commodo aute anim 
dolor adipisicing incididunt. Cillum ex commodo dolor nisi 
nulla id proident occaecat amet adipisicing eiusmod duis. 
Eiusmod nisi exercitation deserunt in incididunt magna dolor. 
Fugiat do nulla non est. Enim magna labore irure in.\r\n",
    "registered": "2014-09-03T05:45:06 -06:-30",
    "latitude": -66.575199,
    "longitude": -66.479327,
    "tags": [
      "eiusmod",
      "qui",
      "aute",
      "ea",
      "ut",
      "qui",
      "qui"
    ],
    
    "greeting": "Hello, Christine Levine! You have 6 unread 
messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5582f8f96b9f9e87d16f4544",
    "index": 4,
    "guid": "ec7cd607-dd0b-466f-9c8a-38bf430c145f",
    "isActive": true,
    "balance": "$2,895.67",
    "picture": "http://placehold.it/32x32",
    "age": 21,
    "eyeColor": "brown",
    "name": "Naomi Miller",
    "gender": "female",
    "company": "RONELON",
    "email": "naomimiller@ronelon.com",
    "phone": "+1 (950) 583-2168",
    "address": "339 Keap Street, Singer, Oklahoma, 9244",
    "about": "Esse fugiat consectetur id magna nisi. Elit 
laboris tempor tempor laboris aute consectetur labore mollit 
anim veniam do dolore. Magna quis irure deserunt sunt ex esse 
esse cillum. Incididunt irure laboris tempor et mollit 
adipisicing ullamco in elit. Commodo incididunt sint sunt sunt 
nostrud consequat magna proident anim ea. Cillum nulla ad ea 
enim officia occaecat reprehenderit nostrud nulla do 
adipisicing cillum.\r\n",
    "registered": "2014-10-18T20:21:26 -06:-30",
    "latitude": -18.367898,
    "longitude": -117.26177,
    "tags": [
      "cupidatat",
      "deserunt",
      "consectetur",
      "et",
      "laboris",
      "duis",
      "proident"
    ],
    
    "greeting": "Hello, Naomi Miller! You have 4 unread 
messages.",
    "favoriteFruit": "banana"
  }
]

This is random json data generated from http://json-generator.appspot.com/
The link for this file is http://json-generator.appspot.com/api/json/get/bMGRMYBGEO?indent=2


Now we parse that data using javascript functon JSON.parse we also use XMLHttpRequest function to get this file over the internet.

Source Code :

<!DOCTYPE html>
<html>
<body>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://json-generator.appspot.com/api/json/get/bMGRMYBGEO?indent=2";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
    document.getElementById("btn").onclick = function() {myFunction(myArr)};
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var result = "";
    var i;
  
    for(i = 0; i < arr.length; i++) {
        result += "<h1>Person "+ i + "</h1><table><tr><td>Id:
</td><td>"+arr[i]._id+"</td></tr><tr><td>Name:</td>
<td>"+arr[i].name+"</td></tr><tr><td>Age:</td>
<td>"+arr[i].age+"</td></tr><tr><td>Gender:</td>
<td>"+arr[i].gender+"</td></tr><tr><td>Picture:</td><td><img 
src="+arr[i].picture+"/></td></tr><tr><td>Company:</td>
<td>"+arr[i].company+"</td></tr><tr><td>Email:</td>
<td>"+arr[i].email+"</td></tr><tr><td>Phone :</td>
<td>"+arr[i].phone+"</td></tr><tr><td>Address:</td>
<td>"+arr[i].address+"</td></tr><tr><td>About:</td>
<td>"+arr[i].about+"</td></tr><tr><td>Latitude:</td>
<td>"+arr[i].latitude+"</td></tr><tr><td>Longitude:</td>
<td>"+arr[i].longitude+"</td></tr><tr><td>Balance:</td>
<td>"+arr[i].balance+"</td></tr><tr><td>Greeting :</td>
<td>"+arr[i].greeting+"</td></tr><tr><td>Fav Fruit :</td>
<td>"+arr[i].favoriteFruit+"</td></tr><tr><td>guid:</td>
<td>"+arr[i].guid+"</td></tr><tr><td>Registered:</td>
<td>"+arr[i].registered+"</td></tr><tr><td>Active ?:</td>
<td>"+arr[i].isActive+"</td></tr><tr><td>Eye Color::</td>
<td>"+arr[i].eyeColor+"</td></tr><tr><td>Index:</td>
<td>"+arr[i].index+"</td></tr><tr><td>Tags:</td>
<td>"+arr[i].tags+"</td></tr></table><br><hr><br>"    

    }
 
    document.getElementById("showResult").innerHTML = result;
}
</script>
<button type="button" id="btn">Parse Text </button>
<div id="showResult"></div>

</body>

</html>

Result :