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 :
