Displaying XML file data in a HTML table

Question

Whenever I run my code, the table headers appear, but not the table data. I think my XML file may not be loading correctly. I am trying to put my XML file into an HTML table. I've been looking at the code too long and this is also my first project using/ writing XML files so I was wondering if someone else could see what could be wrong with my code. My XML file & HTML file are both in the same folder.

Here is my XML:

<!-- School Number 1 -->

<k12School>
    <identification>
        <schoolId>0421</schoolId>
        <name>Eastside High School</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"09"/"10"/"11"/"12"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>1201 SE 43rd St</line1>
            </street>
            <city>Gainsville</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32641</postalCode>
            <county>Alachua</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>101023234576</NCESID>
        </reference>
    </school>

</k12School>

<!-- School Number 2 -->

<k12School>
    <identification>
        <schoolId>0591</schoolId>
        <name>Oak View Middle School</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"06"/"07"/"08"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>1203 SW 250th St</line1>
            </street>
            <city>Newberry</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32669</postalCode>
            <county>Alachua</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>977765431110</NCESID>
        </reference>
    </school>

</k12School>

<!-- School Number 3 -->

<k12School>
    <identification>
        <schoolId>0400</schoolId>
        <name>FLVS Full-Time 9-12</name>
        <organizationType>K12School</organizationType>
    </identification>
    <directory>
        <gradesOfferedList>
            <gradesOffered xlmns="https://ceds.ed.gov/cedselementdetails.aspx?termid=3131">"09"/"10"/"11"/"12"</gradesOffered>
        <gradesOfferedList>
    </directory>
    <addressList>
        <address>
            <street>
                <line1>2145 Metrocenter Blvd</line1>
            </street>
            <city>Orlando</city>
            <stateProvince>FL</stateProvince>
            <postalCode>32835</postalCode>
            <county>Orange</county>
        </address>
    </addressList>
    <school>
        <reference>
            <NCESID>900000212001</NCESID>
        </reference>
    </school>

</k12School>

Here is my HTML/Script:

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $.ajax({
        type: "GET",
        url: "Schools.xml",
        dataType: "xml",
        success: function(xml){
            $(xml).find('identification').each(function(){
                var schoolID = $(this).find('schoolID').text();
                var name = $(this).find('name').text();
                var organizationType = $(this).find('organizationType').text();
                $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
            });
        }
    });
});

</script>


<table id = "school_data">
    <tr><th>schoolID</th><th>name</th><th>organizationType</th><th>gradesOffered</th><th>street>line1</th><th>city</th><th>stateProvince</th><th>postalCode</th><th>county</th><th>NCESID</th>
</tr>
</table>

Try console.log(xml) and console.log('identification') and report your findings. — D. Visser
– D. Visser, Commented May 13, 2015 at 21:17
@D.Visser Nothing happened when I placed those 2 lines right before the closing script tag. — Brandon Lumsden
– Brandon Lumsden, Commented May 13, 2015 at 21:29
@LDMS Yes, the <k12School> is the root node. I tried commenting the other 2 instances of <k12School> out and it changed nothing. Maybe I am including the multiple schools wrong in the XML file though. — Brandon Lumsden
– Brandon Lumsden, Commented May 13, 2015 at 21:33

Ritesh Karwa · Accepted Answer · 2015-05-13 21:49:32Z

Change the datatype:xml to Html

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <style>

  </style>
</head>
<body>
  <table id = "school_data">
  <tr><th>schoolID</th><th>name</th><th>organizationType</th><th>gradesOffered</th><th>street>line1</th><th>city</th><th>stateProvince</th><th>postalCode</th><th>county</th><th>NCESID</th>
  </tr>
  </table>

  <script>
     $(document).ready(function(){
           $.ajax({
               type: "GET",
               url: "schools.xml",
               dataType: "html",
               success: function(xml){
                 console.log("here");$
                   $(xml).find('identification').each(function(){
                       var schoolID = $(this).find('schoolID').text();
                       var name = $(this).find('name').text();
                       var organizationType = $(this).find('organizationType').text();
                       $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
                   });
               }
           });
   });
  </script>

</body>
</html>

D. Visser · Accepted Answer · 2015-05-14 09:31:45Z

There are a couple of minor things with your code you might want to change first.

First off, you have some errors in schools.xml file. You forgot to close some tags, in this case <gradesOfferedList>.

Use the XML validator over at W3Schools to validate your XML files.

Second, always make sure to add <?xml version="1.0" encoding="UTF-8"?> as the first line of your XML files, to prevent any encoding errors.

Third, just as a personal side note, use $(document).ready(function(){}) for clarity sake, instead of $(function()).

Now for the actual jQuery AJAX call, I reworked it a little bit in order to debug it a little better. Take a look:

<script>
    $(document).ready(function(){
        console.log("Golly, we're verifying that jQuery is working on page-load");

        $.ajax({
            type: "GET",
            url: "schools.xml",
            dataType: "xml",
            complete: function(xml){
                console.log('Yes, we did finish loading the XML file.')

                console.log(xml);

                $(xml).find('identification').each(function(){
                    console.log('Iterating through the XML tags');

                    var schoolID = $(this).find('schoolID').text();
                    var name = $(this).find('name').text();
                    var organizationType = $(this).find('organizationType').text();
                    $('<tr></tr>').html('<th>' +schoolID+ '</th><td>$' +name+ '</td><td>$' +organizationType+ '</td>').appendTo('#school_data');
                });
            },
            error: function(errorData){
                console.log('Error: request failed!');
                console.log(errorData);
            }
        });
    });
</script>

As you can see I added an error callback, as specified in the jQuery AJAX documentation. This functjon will be called whenever the request fails.

The other change you will notice is that the success parameter has been subsituted by completed. Now you can actually see the console.log() calls from within the callback, because the complete parameter uses its callback regardless of whether the request failed or not.

Now since you can clearly see from both the XML Validator as well as the error callback is that your XML file is corrupt. To fix that, you'll have to create a root node, like <schools> and wrap that around the whole of your exisiting XML. Now you can embed as many <k12School> tags as you want.

<schools>
    <k12school>
        <identification>
        </identification>
    </k12school>

    <k12school>
        <identification>
        </identification>
    </k12school>

    <k12school>
        <identification>
        </identification>
    </k12school>
</schools>

You can now take back the success parameter into your AJAX call again, since you don't need to debug with complete anymore.

Thank you! You helped me realize that the problem was all in my XML code. I needed to close my <gradesOffered> tag with the "/". Also, after closing the first <k12School> tag, the browser saw everything else as trash so I needed to delete that.
It happened to be a long day for me as well. You are correct. Your XML needs a single root node, like <schools>. Then you can embed as many <k12Schools> tags under that root node as you want.

Collectives™ on Stack Overflow

Displaying XML file data in a HTML table

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related