How to Parse XML using Javascript and jQuery

It’s another week and opportunity to complete yet another tutorial showing you how to easily simplify using CCB’s API to access, modify and integrated your church’s data.

Last week, our tutorial focused on how to use PHP to parse an XML file created by a REST client using the CCB API.

This week, we’ll continue to using the same XML file, but instead of using PHP as did the previous tutorial, this week’s tutorial uses Javascript and jQuery to parse the XML file.

I’m not going to bore you with too many details in this tutorial, but do feel free to read the previous tutorial. In short, it’s the same tutorial as last week but using different programming language and a framework: Javascript and jQuery.

Creating HTML5 document

To get started, open a text editor of your choice, naming and saving the file as follows: read-xml-individuals.html.

Since we’re using Javascript and jQuery to parse the XML file, you want to create a HTML5 document using the code below:

Two things to note about the code. The first is in the inclusion of an external Javascript framework file via a content delivery network known as jQuery.

In short, jQuery helps to conform javascript code to uniformity while increasing performance with less lines of code through the use of native methods and components.

The second thing to note is a HTML div element with the unique id of results is created and defined. This div is used to inject the data from the XML file when opening and parsing the file next.

Parsing XML with Javascript and jQuery

Now that the HTML5 document created and there is a HTML element to append or inject data into, we can now complete the next and final stage of this tutorial: writing Javascript and jQuery to parse XML.

Just below the our newly created HTML div element, create open and close script tags for our Javascript and jQuery to find their home within.

Next, create a jQuery document ready function that is to be loaded and executed upon a successful page load.

Within the document ready function, it’s time to read the XML file using $.ajax jQuery method. Because we’re only reading the file and not passing any input data, we’ll use the $.ajax type of GET.

Next, specify the $.ajax url to be the file name or path of file name of your XML file. For this tutorial, the file name for the XML file created by the REST client is response-data-export.xml.

Next, set the $.ajax dataType to be xml since due to use using and parsing an XML file.

Next, we’ll set success and error functions. The success function is used when the file is successfully retrieved, opened, and processed.

And you’ve figured correctly if you guessed the error function is used should the XML file fails to be retrieved, opened, and processed.

In both cases, a message is prepended to the HTML div element for results.

Within the success function, you’ve likely noticed a bit more functionality and code in comparison to the error function.

For starters, the xml object is passed as a argument which returns the XML files XML object.

We use jQuery’s .find, .children and .each methods to parse each individual’s for their full name (i.e., the full_name XML element).

Within each individual iteration, note that the full_name XML element is returned using jQuery’s .find and .text methods.

Also notice the person’s full name is appended to the HTML div for results within the .each method, yet the total number of persons, captured by incrementing the i variable within each iteration of the .each method, is prepended to the HTML div for results. This allows for the total number of persons to be shown before the all names are displayed.

Time to Bring it all Together

This tutorial should get you started and down the path a bit in terms of reading, parsing, and processing XML files using Javascript and jQuery.

Although I chose to use the full_name XML element from the XML file as an example, you can add and parse for as many XML elements as needed.

Nevertheless, your code in its entirety should look like the following:

Save the file and execute your .html file in a web browser. As with the Parsing XML using PHP tutorial, you should see the same output response to the web browser.

That’s it for today’s tutorial. Let me know if you have any questions or comments, or need technical support assistance.

Thanks and see you next week. That’s all for now!


Please comment if this tutorial has helped you.