21331

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>

Answer1:

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 <a href="http://www.w3schools.com/xml/xml_validator.asp" rel="nofollow">XML validator over at W3Schools</a> 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 <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow">jQuery AJAX documentation</a>. 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.

Answer2:

<strong>Change the datatype:xml to Html</strong>

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

Recommend

  • Why do I need to initialize an int variable to 0?
  • How can I start a .NET application from Java on Linux, Mac and Windows?
  • How to Upload Large Video FIle on server?
  • How to download an image using a URL with a query string instead of image path?
  • How to change type datatable column [duplicate]
  • Java Regex Finding digits in a String
  • error with puma in local server
  • Change div id into javascript variable
  • How to define realms for using by Google App Engine?
  • Remove white background from progressdialog
  • p:dataTable with paginator: how to use p:printer to print all rows without paginator
  • wordpress posts_orderby filter with custom table in plugin
  • Check every condition in Python if else even if one evaluates to true
  • How to load PDFs from Documents Directory?
  • CRM Dynamics How to set short list - long list relationship
  • Using Fractions in Python
  • Extract Data from a Web Page - using VBA
  • Count of values within specified range of value in each row using data.table
  • search bar getting disappeared in ios UIsearchcontroller
  • How to split a string into a list by digits? [duplicate]
  • Joining across databases with dbplyr
  • Trigger powershell based on event log
  • Can someone explain how Yii minimizing assets is supposed to work on Heroku?
  • How to add ng-app after page load?
  • async GET request with body from browser
  • can you use embedded ruby in custom javascript files in rails?
  • Jenkins sending notifications to the wrong commit id
  • Use PHP to Replace HTML with HTML
  • How to get the Owner of the ContextMenu (from Silverlight 4 toolkit)?
  • Adding horizontal slider to QTableWidget
  • cSPADE data mining in R using arulesSequences - Error while converting to “transactions” format
  • playing mp3 from nsbundle
  • 'Edit' function for forum posts and such
  • JQuery: Infinite input select
  • Google App Engine backend servlet not responding
  • Make checkout phone field optional for specific countries in WooCommerce
  • Excel VBA : conditional formatting of sheet1 cells from sheet2 values in excel 2007