Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
Then go over to the console. Make sure that we have this object right here showing, which we do. That means that my jQuery is working properly. It's getting the element from the file, and it's retrieving it and putting it into this console. So that's great. Now let's go ahead and output that data into our div. Let me take out the console.log here. And I will create a variable called output, and I will start by feeding it just an unordered list tag. I will add a class so that I can target it with CSS.
I will close that out. Now we can use the each statement to output the list items. This is a function literal, and we'll get the key and value variables set up. Now we need to start outputting just the names like before, but this time I'm going to put the beginning and closing li tags on their own line. That just makes it easier to add other elements.
So I am going to add an h2 tag here and output the name from the value variable that gets created from this each statement right here. Now all I need to do is output the HTML into my update div. So let me save that and I will switch back over to my browser and hit the Refresh button.
You can see one of the names come up here. Let me make that a little bigger. All the names are now coming up from the JSON document. Now we can add the rest of the elements we want from the JSON file. Let's go ahead and add the image tag. In the image tag I am going to use the field called shortname. It just has a simplified version of the persons' names. So if they have three names, or this Jonathan G. Ferrar II, I just call them Jonathan Ferrar and then put an underscore in between them, and those relate to the file names of the images that I have for each speaker.
In my script file, I can just use that, making sure that I target the images folder, then the slash, that shortname, and then _tn, for thumbnail, .jpg. For the alt, I will just make it the name of the speaker. For the biography, I am going to copy this one and just stick it in a paragraph tag, and just call the val.bio. So let's take a look at this in the browser. We'll refresh, and we could see the name of the author, the photo, and the bio come up.
Perfect! So, so far, our page is simply displaying the information from our JSON document. It's not very different from what we've done in past videos. In the next movie, I'll show you how we can capture events from the search field and create a search engine for our JSON file.