Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Retrieving and displaying XML data

From: Working with Data on the Web

Video: Retrieving and displaying XML data

There are many, many ways to pull in XML data, to be shown on a web page. In this lesson, we'll take a look at the client-side solution. One that uses the popular framework, JQuery. In this example, we're going to incorporate XML data to show four paintings in an online exhibition. You see the final file here. On the screen the data will include the file names of the images as well as text content for the painting slides, artists and costs.

Retrieving and displaying XML data

There are many, many ways to pull in XML data, to be shown on a web page. In this lesson, we'll take a look at the client-side solution. One that uses the popular framework, JQuery. In this example, we're going to incorporate XML data to show four paintings in an online exhibition. You see the final file here. On the screen the data will include the file names of the images as well as text content for the painting slides, artists and costs.

So let's look at the XML file that holds that data. This is the data.xml file from 0303. As you can see the root element is paintings. That starts on line two. And there are four separate painting nodes. This makes up one painting node, from line three to line eight. In each of those, is the title of the painting, the artist, which is the same for all four nodes, the image file name, and the price. You may notice that the file name doesn't contain any path information.

That's to keep the data flexible. Likewise the price has no dollar sign. Again flexibility is the key reason. Okay let's go over to our HTML file. Which is index.htm from the same folder, and start adding in our code. Now before we dive in to the JavaScript, let me show you the HTML. I'll scroll down to around line 40. Around line 40, I have a div with an id of container.

This div will eventually hold our paintings and accompanying details. Right now, all that's there is another div with a loading gif image. Once our XML data's fully loaded, we'll hide it. Now, let's scroll up to the head section. I already have my call to the latest current version of jquery in place. So, let me build out my script right below that. I'll begin by adding a script tag. And give it a type of text JavaScript.

Next, let's add the document ready function so we can ensure that the rest of the page is fully loaded before we begin processing. So, dollar sign, parenthesis, document and after the parenthesis get ready . Another set of parentheses, function, followed by its own set of parentheses, and then in between the two closing parentheses. Put a set of curly braces and open it up. Now lets go ahead and put our closing semicolon at the end of that function.

The first thing we're going to do is use one of the primary AJAX methods in J query to asynchronously load our XML file. This method will take a number of perimeters, so $.ajax ({, and let's enter our first parameter which is type, so type. And then, in GET and traditionally, we'll keep that as all upper case. This is a series of parameters, so you need commas after each one.

URL is the next one, and this is the name of our data file, which is called data.xml. Comma, now the data type, with an upper-case T. Also in quotes, xml. Last comma and if the file loads successfully, success, we want to call the XML parser function, which we were just about to write. Let's put a closing semicolon after that curly brace and parentheses.

And now we're ready to define the XML parser function that we just referenced. Thus code block will go below the document ready function. We'll just create a little space there, and let's scroll down the page a tad, alright that should do it. The function is not terribly long, but it's key that you understand how this works, so let's enter the code one bit at a time. I'm going to start with the basic function name, function XML parser and in parenthesis what we're passing to it, which is XML, and then an open and closing curly brace.

Now in the middle of that we'll start to put our code. Because this function would only have been called if the XML file was successfully loaded, we can get rid of our loading gif. So lets just fade that out. So I'll enter dollar sign, parenthesis, single quotes, and then pound load to target that div, then .fadeOut. A lovely jQuery function, follow that with parenthesis and a semicolon. Alright, now we come to the meat of the routine.

We need to loop through the XML data and locate all the painting nodes. So we'll use a for each loop and the J query find function. What are we looking in? We're looking in XML. So $(xml) within that. This is the XML that was passed to our XML parser function.find. What are we looking for, in parenthesis? We are looking for the node painting, make sure you don't put paintings.

And then after the parenthesis dot each. Parenthesis function, parenthesis, and then after that set of parenthesis, before the closing, then a curly brace. And give us a little space, finish it off with a semicolon and that chunks done. So what do we want to do when we find a painting node? We want to write out the code to display what we want. This is done by appending a combination of HTML and JavaScript to the container div, you'll remember the container div, "online 40".

Now because we have to concatenate Jquery code with the HTML it can get a bit complex. But we'll take it one element at a time. So let's start with dollar sign parenthesis and the node that we're going to append to which as I said was pound container. And then after that, append and I'm going to start this with a pair of single quotes and go within that, so now the first part is create a div with a class of painting.

Now, you want to make sure that you use double quotes within the single quotes that we're creating here. All the attributes should have double quotes. Okay, my div tag is now complete. Within that div, I want first, to put in my image. So we'll start off an image tag, img. And give it the source attribute equals double quotes now my code editor when I type in one double quote gives me a pair because normally that's what you need.

But I want to delete the second one now because I'm going to be closing this off before we get to the end. Now I want the path to where my images are, which is in a folder called images, and then a forward slash. Now that's all we need so far with the HTML. We're going to concatenate a little JavaScript here, so I'll put in a plus sign, and as we're looping through each of the painting nodes, we'll use the this construct In parenthesis.

We'll look within that and we'll find the node, image. And then once we find that, we'll get its text value. So what we're doing, and I'm going to switch back to data XML for one quick second is we're looking for this image here, and then we'll get this text value within that. And that's the basis for all the data that we're going to be inserting. OK, that's all we need from the JavaScript, so let's head back to our HTML, by concatenating again.

We'll add a plus sign and then we need again, a pair of single quotes and all of our HTML will go within that. Now you'll recall that when last we left our HTML, we were in the middle of declaring our source tag. So we had an open double quotes here. So now I'm going to close that off. Now again Aptana has put in a pair of quotes and I want to get rid of that it just makes it a little easier for me to think as I'm writing this because I do have to put in other attribute. In fact we'll put another one in now.

Add a space after that double quote width equals a 200 value. (INAUDIBLE) And the next attribute we'll bring in, is the Alt tag. And we'll set that equal to, and here we'll put in a single ". And again, we're going to stop there, and then bring in my JavaScript. Here I'll pick up the title and drop that in.

Now, I could type this all out again, but let's just copy all of that code, that is basically the JavaScript code. We'll paste it in and we'll change image to title. Now that's all of the image tag, and all I need to do now is to close it off. So after the plus sign, we'll now concatenate another string, and that's in single quotes starting with a double quote, and again aptana insists on putting in that double quote pair for me, but I only want one.

And then we'll do a forward slash and closing bracket, okay. That actually, from here, all the way to here, is our simple image tag. Sometimes it's helpful if you put the code in with dummy values, just as you would normally, and then replace the data with your JavaScript code. If you find this a little confusing, that might be an alternative approach for you. Now we are still continuing our string, with a little bit more HTML code, I'm going to put in a BR tag, for a line break, and then another div with a class of Title.

And again the attributes are in double quotes close off my div tag and now we're ready for our JavaScript again. This time we're going to use the exact same one that we wrote before which is, the one that finds the title information and I'll copy that and paste that in. We're almost done hang in there. And now we're ready to put in another small bit of HTML. This is another line break, br tag. This will be the price but I'm not going to have any words before. I'm just going to have a dollar sign.

Okay, let's close off that string and we'll bring in our price. Now, again, I'm just going to copy my JavaScript so I don't have to rewrite all that. I copied the space there too, that looks pretty good. Now I do want to make sure to change title to price. And now let's go back and concatenate in our final bit of HTML. And that's going to be closing off the various div tags here. There are two of them.

And that's all done, and at the end, we'll put a glorious semicolon. Phew! That's a piece of work isn't it? Alright. The last line of code we need fades into paintings. Because it's J query, we can do this sort of stuff. So I'll identify the class of painting, and the J query function fade in. Give it a duration for the fade in of 1,000 semicolon at the end.

Alright that's a done deal, I'll save the file and lets go take a look in the browser. Okay, so here is that file prior to refreshing and as you can see I have my loading gif cranking right away here because I haven't hit refresh to bring in my XML data. So I'll do that now. Click refresh, and after a very brief pause, there's our four paintings complete with titles and prices. Sweet! As I mentioned at the beginning of the lesson, this J query technique is just one of the many ways you can integrate XML data into your webpages.

There are numerous others for other frameworks, as well as servers side processing language, like php and .net

Show transcript

This video is part of

Image for Working with Data on the Web
Working with Data on the Web

25 video lessons · 10110 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

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 Working with Data on the Web.

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.