In this lesson I will show you how to retrieve JSON data using the jQuery getJSON function. The process is straightforward and allows you to do some useful things such as update the page with the data without a full refresh.
CREATING THE HTML PAGE
The first step in the process is to create a basic HTML page. You will have seen in previous lessons that you can use the Emmet plugin within Visual Studio Code (and other editors) to quick create the required code. Just enter an exclamation mark and press the TAB key to generate the following:
Feel free to change the title of the page to something more appropriate.
ADDING A CONTENT DIV AND BUTTON
Next we will add a content div so that we can update it with the contents of the JSON data. We will also add a button which, when pressed, will update the div with the JSON data.
CREATING THE JQUERY CODE
The next step is to create the script to grab the JSON data once the button has been pressed. The first thing to do is to add the jQuery library. In this instance I am using the Google hosted library. It is often better to use a CDN rather than use your own locally hosted version of jQuery.
Next we create the function to react to the button being clicked. We know that the button has an ID of loadData so we use that as follows:
Line 14: we target the #loadData button. You do not have to use an ID on this simple script as there is only 1 button but we may as well ensure we are targeting an individual button just in case there were more. If you only had one button then you could just use ‘button’.
Line 15: one thing I always like to do before adding more complexity to any code is to check if it works at a basic level. To do this I am using an alert so that when the button is pressed a popup message appears. It is a useful tip to use in your own coding. If everything is working so far then you should get the popup message.
Next, we place the request to retrieve the JSON data from the json.js file as follows:
Line 17: notice how, once again, I use a method to check everything is working. This time I am using console.log to print the returned JSON data to the console.
In order for this to work we will need to create the json.js file:
This is a very simple JSON structure with limited data. I find it is always a good method to start with simple data before expanding the data.
At this point everything should be working when you text the script and you should see the JSON data being logged in the console.
All we need to do now is update the content div with the data.
Line 18: we start to loop through the data (which is stored as an object in ‘result’). We know that we have a key and value pair.
Line 19: for each key and value pair we append a paragraph tag with the key and value data.
When you press the button the data will be appended to the div with an ID of jsonContent.
USING JQUERY JSON AND DATABASES
This is a useful little script for simple JSON data. You could enhance the script further by considering how you would deal with data returned from a database call.
