Attempting to parse an XML document using jQuery Ajax

Question

I have been desperately trying to display some XML data on a webpage for a school project. I've seen several different examples so far but I'm not sure what I am doing wrong. I am a relative newbie to Javascript and have really been struggling. What I am trying to do is pull some of this information out from the XML file and then display it on an HTML web-page. I have attached my code. Any help would be wonderful.

<bbgame source="STAT CREW Basketball" version="4.15.03" generated="12/17/2013">
  <gametracker gameid="1288244"></gametracker>
  <venue gameid="GAME11"
           visid="MSU" visname="MISSOURI STATE"
           homeid="LOU" homename="LOUISVILLE"
           date="12/17/2013" location="KFC Yum! Center, Louisville, KY"
           time="9:05PM" attend="21335" schednote="" start="" end="" duration=""
           leaguegame="N" neutralgame="N" postseason="N">
    <officials text="Doug Sirmons, Rick Crawford, Tim Nestor"></officials>
    <rules prds="2" minutes="20" minutesot="5" fouls="5" qh="H"></rules>
  </venue>
  </bbgame>

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="mainstyles.css">
<title>Louisville Cardinals Statistics</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

<script> 
$(document).ready(function(){ // ready document to be loaded
    $.ajax({
        type: "GET",
        url: "lou.xml",
        dataType: "xml",
        success: function(xml_parse) {
            // the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
            // find all 'gametracker' entryes;
            // (each) iteration trough founded entryes;
            $(xml_parse).find('gametracker').each(function(){
                // select a container were you want to put your data, them append data in it;;
                $('.container').append($(this).attr('gameid'));
            });
        }
    });
});
</script>
<div class='container'></div>
</body>
</html>

My code seems like it should be working properly. I have the index.html and the xml file in the same folder. I am also struggling with trying to display the variables in the actual HTML document. Would I just surround this document.write with a div in order to maneuver it around the page and style it?

EDIT: Thanks for the help so far guys. I had a couple more quick questions and I did not want to make another post.

Can I call this parse_xml function again without being in the $(document).ready(function(){ ? I'm still learning jQuery / Javascript and I am embarrassed to say that I am having a hard time keeping up with all of these brackets. I have quite a few things that I need to pull out a relatively large and complex XML file.
Is there a way to display some of the data in a table? For example the XML node on venue has several pieces of information I need to pull out and if I could load them into a table it would be more convenient than storing each one individually?

Thanks again for the help fellas.

Console.log(XML); inside your parsexml function to see if the data is getting there correctly — scrowler
– scrowler, Commented Jan 18, 2014 at 19:09
Console.log(XML) needs to be included? So that is just to check that the XML data is there? I will research into how to incorporate this. — Jonathan Britt
– Jonathan Britt, Commented Jan 18, 2014 at 19:12

Dreanmer · Accepted Answer · 2014-01-18 20:53:11Z

1

For starting, your src for jquery wrong, you forgot the http: on the url;

Second, variables declared with var will be available only inside the function where declared, for creating a global variable call them without var;

you can't run this direct on browser, the ajax will don't function, therefore you can use a localhost apache to run them...

<script> 
$(document).ready(function(){ // ready document to be loaded
    $.ajax({
        type: "GET",
        url: "lou.xml",
        dataType: "xml",
        success: function(xml) {
            // the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
            // find all 'gametracker' entryes;
            // (each) iteration trough founded entryes;
            $(xml).find('gametracker').each(function(){
                // select a container were you want to put your data, them append data in it;;
                $('.container').append($(this).attr('gameid')+' - ');
            });
        }
    });
});
</script>

this script will put the entryes on the div with class 'container', separating them with ' - '

<div class='container'></div>

i think you are learning this trough the hardest way... try starting with this: http://learn.jquery.com/javascript-101/

sorry bad english :) happy coding

edit: try devtools of Chrome, (f12 on windows or alt+command+i on mac) on the console view you can run js code in realtime, if you do a console.log(var) on your code, the result will show on this console of devtools.

edited Jan 18, 2014 at 20:53

answered Jan 18, 2014 at 20:44

Dreanmer

7522 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonathan Britt Over a year ago

Thank you very much for your help. I have added the http to the src for the Google hosted jQuery. I did not realize that using var is only a local variable within that script. I am working on getting a local apache server where I can host this data. You are also correct that I am learning this the hard way. I sort of dove right in without learning the basics. I am reviewing that link you sent me. Thanks so much for your help.

Collectives™ on Stack Overflow

Attempting to parse an XML document using jQuery Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related