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.

	  '<div class="heading">'+data[0].title+'</div>',
	    '<img src="'+data[0].image+'" style="width:150px; height:100px;"/>',

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.

Back to Blog

Say Hello

You can reach me by email, I'd love to hear from you.