Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

External JSON Data File Call In Using Ajax Tutorial

Published :
Author :
Adam Khoury
In part 2 we focus on the Ajax request and parsing return objects in a smart compact JavaScript for loop. mylist.json { "u1":{ "user":"John", "age":22, "country":"United States" }, "u2":{ "user":"Will", "age":27, "country":"United Kingdom" }, "u3":{ "user":"Abiel", "age":19, "country":"Mexico" }, "u4":{ "user":"Rick", "age":34, "country":"Panama" }, "u5":{ "user":"Susan", "age":23, "country":"Germany" }, "u6":{ "user":"Amy", "age":43, "country":"France" }, "u7":{ "user":"Pete", "age":18, "country":"Italy" }, "u8":{ "user":"Chris", "age":25, "country":"United States" }, "u9":{ "user":"Louis", "age":31, "country":"Spain" }, "u10":{ "user":"Emily", "age":38, "country":"Uraguay" }, "u11":{ "user":"Shawn", "age":52, "country":"Chile" }, "u12":{ "user":"Greg", "age":24, "country":"Romania" } } JSON_tutorial_2.html <!DOCTYPE html> <html> <head> <script> function ajax_get_json(){ var results = document.getElementById("results"); var hr = new XMLHttpRequest(); hr.open("GET", "mylist.json", true); hr.setRequestHeader("Content-type", "application/json", true); hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var data = JSON.parse(hr.responseText); results.innerHTML = ""; for(var obj in data){ results.innerHTML += data[obj].user+" is "+data[obj].age+" and lives in "+data[obj].country+"<hr />"; } } } hr.send(null); results.innerHTML = "requesting..."; } </script> </head> <body> <div id="results"></div> <script>ajax_get_json();</script> </body> </html>