Parsing XML in JavaScript


Since a lot of API responses are in XML, we'll review XML parsing in JavaScript to help you get to the interesting data faster. We'll use the jQuery library to make XML parsing in JavaScript as easy as possible.

This tutorial assumes that you've already gone through our JavaScript getting started tutorial and are familiar with how our JavaScript SDK works.

NOTE: If you'd rather work only with JSON, you can convert XML Choreo responses to JSON using our Utilities > DataConversions > XMLToJSON Choreo.

Get an XML Response

1Log in to Temboo and go to the Yahoo > Weather > GetWeatherByAddress Choreo in our Library. Select JavaScript from the drop down menu at the top of the page.

2Enter a location in the Address input and click Generate Code to test the Choreo from our website.

3You get a whole bunch of XML in the Response output with lots of weather-related information about the location. Next we'll see how to parse through this response in JavaScript and pick out only the pieces we're interested in.

Parse it in JavaScript

4 Create a new .html file and copy in the generated JavaScript Code.

5Make sure to include the jQuery library at the top of your code.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

6 Replace the contents of the showResult callback with the code below. Steps 7-10 walk you through what happens in the code.

// Parse XML
$xml = $($.parseXML(outputs.Response));

// Get yweather:condition element
$condition = $xml.find('yweather\\:condition, condition');

// Get text attribute
$text = $condition.attr('text');

// Get temp attribute
$temp = $condition.attr('temp');

// Print text and temperature
console.log($text);
console.log($temp);

7We want the text and temp attributes from the yweather:condition element.

<yweather:condition  text="Mostly Cloudy"  code="28"  temp="73"  date="Wed, 16 Jul 2014 10:53 am EDT" />

8First we parse the response using parseXML(). We convert the JavaScript object into a jQuery object by enclosing it in $() tags.

9Next, we parse out the data we want from the XML file. Using find(), we get the XML element yweather:condition. yweather is a namespace used to avoid name conflicts. Since there is only one element named condition, we can also simply use $condition = $xml.find('condition');

10Finally, we get the attributes we want and print them out. We use .attr() to get the text and temp attributes.

Try It Out

11Create a new file in your chosen proxy server language and copy in the generated Yahoo! Weather Proxy Code. Name your file proxy-server.

12Place both files on your web server and make sure that it's running.

13In our browser, navigate to your .html file. You should see the text and temp attributes printed in the developer console.

What next?

Now you're ready to tackle all sorts of XML parsing tasks. Check out the 2000+ Choreos in our Library and find some exciting data to parse.

Once you've got your code up and running, you're ready to move on and do more. From monitoring your running applications, to moving your generated Temboo code to your preferred development environment and sharing it with colleagues, collaborators and friends - we've got you covered.

Commit Code to GitHub

Commit Temboo-generated code directly to GitHub and share with the world. Learn more.

Need help?

We're always happy to help. Just email us at support@temboo.com, and we'll answer your questions.


Back