How do I pull in data from a JSON file?

Now that you’ve created a JSON file, you’ll want to use that data somewhere.

Using JavaScript JQuery, pull in data using the getJSON function. In the parenthesis put the location of your file and a variable where you’ll store the contents of the JSON, I called mine “data”.

In this example I’m pulling in a specific object from the file, data[0] which is the first object on the list and filling an given div (with the ID “container”) with some HTML.

<script>
$.getJSON('json/myjsonfile.json',function(data){
	$('#container').html([
	  '<div class="heading">'+data[0].title+'</div>',
	  '<div>',
	    '<img src="'+data[0].image+'" style="width:150px; height:100px;"/>',
	  '</div>'
	].join(''));
});
</script>

Note: The last line of your javascript containing HTML should not have a comma.

Note: Make sure your HTML has a container to receive the JSON data.

For more detailed documentation, head over to the jQuery API.