Fetch JSON Data Using jQuery AJAX Method: getJSON

today let's see how to fetch JSON data using jQuery without refreshing the web browser basically using the shortened of Ajax method present inside the jQuery that is get Jake get jason method of jQuery inside our HTML we have an unordered list without any list items and a button this editor doesn't allow me to write a JSON file so I will directly go to the folder and create a file called some weird extension okay that's okay i limit jason underscore a two dot jason with an extension of jason i'll open the file in the editor now it has some junk data which i'll delete I will remove this and save it Jake HTML file we have a custom J's file and this is the chase and data start with a curly brace inside that I'll take a key I'll limit p1 it means or someone detail inside this curly brace I'll have its value this is now the second object people to actually p1 and p2 are seals 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 : Satish is its value H is key actually my age is 25 25 is its value company is key let me give its value as technology similarly I'll write the information of person - I will copy and paste this and modify the actual datum 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 agent company detail of the person 1 and person so let's see how we could fetch names of all the person's name of all the persons available inside our JSON data so this is where I'll write my jQuery inside my we have a button here for the click event I'll write the JavaScript so once the button has been clicked call an anonymous function now with this static method of jQuery that is dollar dot get Jason which takes the first parameter as the URL of the JSON file the next parameter is the callback function so once we specify Jason and score data table Jason once this file has been parsed 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 have named it as obj since we have more than one object here it gives us P 1 and P 2 I will need to loop through the elements loop through the objects so I will take each first parameters 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 n values actually you could call it anything I J or anything I'll call it key n value to make the illustrator illustration easier I'll select the UL the unordered list present in our index dot HTML and then append the list items remember plus is concatenation operator in jQuery here we are in 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 valued named since we have two objects here this loop will be iterated to x and hence both the names will be fettered that is Satish and Kiran so save the file and one more thing these files are present on the hard disk that is C slash vamp slash www dot slash Jason if you open it directly things does not work to make it work switch on your band or put this 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 jason 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 they tend 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 am trying to show is you could generate this JSON file from a database like MySQL or Oracle SQL engine so it will generate this JSON data through these databases and it would it would be vetted by the jQuery script and displayed on the web page without the need for modification to any of the files it could give any key values doesn't matter until the jQuery is fetching only the values 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 it will show some functions which would fetch the data automatically without the user need to click the button so please keep subscribe to techno tip calm and our YouTube channel also spread this video share these videos on Facebook Google+ LinkedIn Twitter etcetera and please like it on YouTube [Music]

Channel: Technotip

Views: 208,491

Keywords: jQuery, jSON, AJAX, getJSON, Object, key, value

Id: pe6keTE9LbE

Length: 9min 10sec (550 seconds)

Published: Sun Oct 07 2012