Introduction to fetching JSON with jQuery
Today let's see how to fetch JSON data using jQuery without refreshing the web browser. Basically using the short end of Ajax method present inside the jQuery that is get j get JSON method of jQuery.
Preparing the HTML and creating a JSON file
Inside our HTML, we have an unordered list without any list items and a button. Well, this editor doesn't allow me to write a JSON file. So, I'll directly go to the folder and create a file. I got some weird extension here. Okay, that's okay. I'll name it JSON data dot JSON with an extension of JSON. I'll open the file in the editor. Now it has some junk data which I'll delete. I'll remove this and save it. Check HTML file. We have our custom JS file and this is the JSON data starts with a curly brace.
Building JSON structure and adding objects
Inside that I'll take a key I'll name it P1 it means person one detail. Inside this curly brace I'll have its value. Now the second object P2. Actually P1 and P2 are keys. Whatever I write inside this curly brace are its individual values. So inside this I'll take some key and values. Again basically string data: name is key, colon Satish is its value. Age is key. Actually my age is 25. 25 is its value. Company is key. Let me give it value as technoative. Similarly, I'll write the information of person two. I'll copy and paste this and modify the actual data. So these are the two objects present inside our JSON file. P1 and P2 are keys and whatever present inside these curly braces are its values. So we have two objects P1 and P2 are keys: inside the curly brace we have its value with name, age and company detail of the person online person.
Goal: fetch and display names from JSON
So let's see how we could fetch names of all the persons name of all the persons available inside our JSON data. So this is where I'll write my jQuery inside. I have a button here for the click event I'll write the jQuery script. So once the button has been clicked, call an anonymous function.
Using $.getJSON and callback handling
Now with this static method of jQuery that is dollar.get get JSON which takes the first parameter as the URL of the JSON file. The next parameter is the callback function. So once we specify JSON data.json once this file has been passed that is this data will be returned back to the callback function and we could catch that data here with any variable name. It's an object basically. I'll call it OBJ. So you could name it anything. For convenience, I have named it as OBJ.
Iterating objects with $.each and appending to the DOM
Since we have more than one object here with keys as P1 and P2, I will need to loop through the elements, loop through the objects. So I'll take each. First parameter is the object which has been returned back. Next, an anonymous function. It's basically a callback function which will return key and value. To keep these variable names meaningful, I'll just call it key and values. Actually, you could call it I, J, or anything. I'll call it key and value to make the illustration easier. I'll select the ul the unordered list present in our index html and then append the list items. Remember plus is concatenation operator in jQuery. Here we are not interested in the keys but we are interested in the value. So this is value. So I'll write value dot let me fetch the name all the names. So I'll write value dot name. Since we have two objects here this loop will be iterated two times and hence both the names will be fetched that is Satish and Kiran.
Running from a server and dynamic JSON updates
So save the file and one more thing these files are present on the hard disk that is C/vamp/www/json. If you open it directly things doesn't work. To make it work switch on your vamp or put these files into a server and then open it. So now it's working. So now you need not touch any other file than this JSON file. You could modify, update or delete the data and it would be reflected on the web page without any need for modification to the HTML file and not even to the jQuery file. So I'll add another person detail. Open the browser. Refresh it. Now click on the user. So that user name has also been fetched. So I'll add another data. So basically what I'm trying to show is you could generate this JSON file from a database like MySQL or Oracle SQL engine. So it could generate this JSON data through these databases and it would be fetched by the jQuery script and displayed on the web page without the need for modification to any of the files. We could give any key values doesn't matter until the jQuery is fetching only the values.
Wrap-up, next steps, and calls to action
So this is how we could fetch JSON data without refreshing the HTML page. In the next video we will show how to fetch the data JSON array from the JSON file and also we would show some functions which would fetch the data automatically without the user need to click the button. So please keep subscribed to technotip.com and to our YouTube channel. Also spread this video, share this videos on Facebook, Google+, LinkedIn, Twitter, etc. And please like it on YouTube.
