⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

External JSON Data File Call In Using Ajax Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   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>
▲