Reading data with jQuery
Video: Reading data with jQueryIn the last movie we used jQuery's load method to load some text from an external source. If you're looking to load structured data, jQuery has a method called getJSON. As the name implies, it's designed to load data in the JSON format. So once again, I'm beginning with a simplified version of our HTML file. It's pretty much just a div with an ID of update, and then they call to jQuery, as well as our script file. Our script file right now is empty, and we're going to need a file called data.json. It has the data that we need to load into our document.
- Next steps
Viewers: in countries Watching now:
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Reading data with jQuery
In the last movie we used jQuery's load method to load some text from an external source. If you're looking to load structured data, jQuery has a method called getJSON. As the name implies, it's designed to load data in the JSON format. So once again, I'm beginning with a simplified version of our HTML file. It's pretty much just a div with an ID of update, and then they call to jQuery, as well as our script file. Our script file right now is empty, and we're going to need a file called data.json. It has the data that we need to load into our document.
So in our script file we'll start off by calling the getJSON method. We'll pass it along the file name that we want to load and then we'll create a function. This would be a function literal so it will have no name. And we want to pass along the data that we get from the getJSON command into this function. So let's go ahead and output the data to our console so we can take a look at it. So let me save this, and I'll switch back to our browser.
I'll hit the Refresh key. And I want to make sure I switch over to the Console tag. And that should give you a list or an array of objects. And if we open that up, we can see that each one of those objects has name and value pairs with different parameters here. And this is essentially how a JSON object looks to your browser. So I want to output a list of some of the names of our speakers, so let's go ahead and prepare an unordered list right here. I'll take out this console.log command and I'll create a variable called output. This is going to have an ordered list here. And then at the end of this list, I need to close the ul tag.
When you have a choice, it's always better to use the built-in functions. So in here I'm going to modify my output variable, and I'll output a list item, and I'm going to use the value variable and pass along the name and close out my list item. So where am I getting this name from? That's actually from the list of objects and the name of value pairs that I get right here. So the name is right here for each one of these objects.
So I can call any one of those by just calling this value and then adding .name to it. So to update the HTML, we need to use the jQuery HTML method. So I want to target our update div and then change the HTML to have the output that we created above. So let me save that and I'll switch over to my browser and refresh, and you can see all of the names coming up from the file. So jQuery also provides additional methods to manage your data.
Let's say, for example, that instead of just replacing all the HTML inside a tag, we wanted to append some HTML to the end of our list. So let's modify our HTML so that we already have something in this div id update. So I'll just create an h1 tag right here and I'll call it Speakers. I'll close it up. So if we were to run this right now, you would see the Speakers in the text and it would disappear and get replaced with this list. But instead of just replacing the HTML, we can actually do stuff like append the HTML, just with an append method right here.