Start learning with our library of video tutorials taught by experts. Get started

JavaScript and AJAX

Reading data with jQuery


From:

JavaScript and AJAX

with Ray Villalobos

Video: 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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
JavaScript and AJAX
1h 12m Intermediate Jan 18, 2013

Viewers: in countries Watching now:

The ability to read data and communicate information asynchronously is fundamental to modern web applications. In this course, author Ray Villalobos takes a look at integrating AJAX (Asynchronous JavaScript and XML) with JavaScript and jQuery—a combination that makes it easy to work with dynamic data and reduces the number of requests to the server. The course first explains what AJAX is, and shows how to load and reload pages with pure JavaScript, update the DOM, and read and parse data in the XML and JSON formats. Next, learn how to read and write information between the server and the client with AJAX methods in jQuery, and build a dynamic search application that updates search results as you type.

Topics include:
  • 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
Subjects:
Developer Web Programming Languages Web Development
Software:
Ajax JavaScript
Author:
Ray Villalobos

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.

So instead of using the for-in JavaScript loop, I'm going to use jQuery's built-in Each statement. I'm going to pass along the data and then a function literal. And that function literal is going to have a couple of variables: one of them called key and the other one called value. So this is similar to using a for- in statement, but a little better because jQuery always tries to do a great job of dealing with browser and platform issues.

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.

So I'm going to save that and I'll switch over to my browser. And now instead of deleting what was already there, I just placed something after it. Of course if there is append, you would think there is a prepend, and of course there is. So now that puts the text before the content of what was already in there. So with jQuery reading in a JSON file is pretty simple. A lot of times the added functionality of methods like append, prepend, and others makes it a better way to work with JavaScript.

There are currently no FAQs about JavaScript and AJAX.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript and AJAX.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked

Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.