Parsing XML in ES6

Let’s say you’re a developer and you’re working on the latest disruptive app. This app tells you the property value of elderly homes in your area. Really cutting edge stuff. Let’s say you’re relying on the zillow API for your property data. There’s just one problem with this API: It returns, GASP, XML!

###Welcome to the real world. As a rock star developer, you’ve never dealt with XML APIs. “Wait, this isn’t JSON API spec compliant?” you ask yourself in disbelief. No friend, this is the real world. In the real world, nobody cares about you. Nobody holds your hand and tells you everything will be alright. Nobody is going to pay your bills, make your coffee, rock you to sleep and tell you you’re the prettiest developer in the whole school.

Where was I? Oh right, XML APIs.

###Enter DOMParser DOMParser is an amazing class in javascript. DOMParser can parse an HTML or XML string and create a new HTML document from it. Essentially, you can parse an XML string, and use all your favorite DOM functions to iterate over objects. It’s unbelievable! Let’s go over an example.

Lets say you have this XML string from an API response:

<?xml version="1.0" encoding="utf-8"?>
<SearchResults:searchresults
        xsi:schemaLocation="http://www.zillow.com/static/xsd/SearchResults.xsd https://www.zillowstatic.com/vstatic/64dd1c9/static/xsd/SearchResults.xsd"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:SearchResults="http://www.zillow.com/static/xsd/SearchResults.xsd">
    <request>
        <address>1220 Hillside Rd</address>
        <citystatezip>Fairfield, CT, 06824</citystatezip>
    </request>
    <message>
        <text>Request successfully processed</text>
        <code>0</code>
    </message>
    <response>
        <results>
            <result>
                <zpid>58784207</zpid>
                <links>
                    <homedetails>https://www.zillow.com/homedetails/1220-Hillside-Rd-Fairfield-CT-06824/58784207_zpid/
                    </homedetails>
                    <graphsanddata>
                        http://www.zillow.com/homedetails/1220-Hillside-Rd-Fairfield-CT-06824/58784207_zpid/#charts-and-data
                    </graphsanddata>
                    <mapthishome>http://www.zillow.com/homes/58784207_zpid/</mapthishome>
                    <comparables>http://www.zillow.com/homes/comps/58784207_zpid/</comparables>
                </links>
                <address>
                    <street>1220 Hillside Rd</street>
                    <zipcode>06824</zipcode>
                    <city>Fairfield</city>
                    <state>CT</state>
                    <latitude>41.17575</latitude>
                    <longitude>-73.288364</longitude>
                </address>
                <zestimate>
                    <amount currency="USD">1749560</amount>
                    <last-updated>11/07/2017</last-updated>
                    <oneWeekChange deprecated="true"></oneWeekChange>
                    <valueChange duration="30" currency="USD">-37584</valueChange>
                    <valuationRange>
                        <low currency="USD">1662082</low>
                        <high currency="USD">1837038</high>
                    </valuationRange>
                    <percentile>0</percentile>
                </zestimate>
                <localRealEstate>
                    <region name="Fairfield" id="31506" type="city">
                        <zindexValue>536,800</zindexValue>
                        <links>
                            <overview>http://www.zillow.com/local-info/CT-Fairfield/r_31506/</overview>
                            <forSaleByOwner>http://www.zillow.com/fairfield-ct/fsbo/</forSaleByOwner>
                            <forSale>http://www.zillow.com/fairfield-ct/</forSale>
                        </links>
                    </region>
                </localRealEstate>
            </result>
        </results>
    </response>
</SearchResults:searchresults><!-- H:012 T:95ms S:869 R:Thu Nov 09 06:46:53 PST 2017 B:5.0.49536.3-hotfix_2017-11-06.b48c77d~hotfix-platform-for-2017-11-06.a932834 -->

How in the world can you parse this?

Let’s take this xml string and parse it into a DOM document! Then we can fetch the zpid of this property.


let request = new Request(`https://www.zillow.com/webservice/GetSearchResults.htm?zws-id=X1-ZWz1bt28y9dgcr_7galu&citystatezip;=${someCityStateAndZip}&address;=${someAddress}`);

fetch(request).then((results) => {
  // results returns XML. lets cast this to a string, then create
  // a new DOM object out of it!
  results
    .text()
    .then(( str ) => {
      let responseDoc = new DOMParser().parseFromString(str, 'application/xml');
      return responseDoc.getElementsByTagName('zpid')[0].textContent;
    }
  });

This will return the ZPID of the property we were looking up through the zillow API!

Breaking it down

Get an XML response from the API
use new DOMParser.parseFromString(string, “application/xml”) to parse result
use any document function to parse for the data you want

###YAY! I find that javascript has an awesome built in solution to handling XML. Parsing an XML string into a DOM tree just feels right, and is very intuitive.

Parsing XML in ES6

Breaking it down

Like what you read?

Check out some other posts