4.5 Zillow Web – Parsing XML

You have now made a successful call to the Zillow API using a proxy. The data that Zillow provides is in XML format. XML data is very different from JSON, and in some ways, much harder to parse. In the last tutorial, we created a function “xmlParser” and traced the data returned. Based on our trace, we know that Zillow returns a very complex and extensive array of data. The main sections are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<demographics:demographics xmlns:Demographics=​"http:​/​/​www.zillow.com/​static/​xsd/​Demographics.xsd" xmlns:xsi=​"http:​/​/​www.w3.org/​2001/​XMLSchema-instance" xsi:schemaLocation=​"http:​/​/​www.zillow.com/​static/​xsd/​Demographics.xsd http:​/​/​www.zillowstatic.com/​vstatic/​eaccd5f05878f186eac33de2f82a70e7/​static/​xsd/​Demographics.xsd">
    <request>​…​</request>
    <message>​…​</message>
    <response>
    <region>​…​</region>
    <links>​…​</links>
    <charts>​…​</charts>
    <market deprecated=​"true"></market>
    <pages>
        <page>
            <name>​Affordability​</name>
            <tables>
                <table>
                    <name>​Affordability Data​</name>
                    <data>
                        <attribute>
                            <name>​Zillow Home Value Index​</name>
                            <values>
                                <zip>
                                    <value type=​"USD">​695200​</value>
                                </zip>
                                <nation>
                                    <value type=​"USD">​170100​</value>
                                </nation>
                            </values>
                        </attribute>
                        <attribute>
                            <name>​Median Single Family Home Value​</name>
                            <values>
                                <zip>
                            <value type=​"USD">​1442100​</value>
                                </zip>
                                <nation>
                            <value type=​"USD">​172500​</value>
                                </nation>
                            </values>
                        </attribute>
                        <attribute>​…​</attribute>
                        <attribute>​…​</attribute>
                        <attribute>​…​</attribute>
                        <attribute>​…​</attribute>
                        <attribute>​…​</attribute>

Whoa! Now that’s messy. And this is only showing a portion of the data. How do we go about parsing this data? The first thing to do, is to determine which data fields you want to display on your site. For now, let’s make a decision to display every single “attribute” that zillow provides. We know that there is a “name” node under “attribute” that we want to display:

  • attribute – > name

Using jQuery’s “find” function to parse the xml

jQuery’s .find function will be used to “find” elements within the returned xml string. For example, we can:

  • use the “find” function to find every “attribute”
  • loop through each “attribute” using the “.each” function
  • display each attribute name

Now, let’s add the code to the “xmlParser” function that will loop through every “attribute” in the Zillow data and trace the “name” value.

1
2
3
4
5
6
7
yoh.xmlParser = function(xml)
{
    $(xml).find("attribute").each(function ()
    {
        trace($(this).find("name").text());
    });    
}

And finally, let’s display the zipcode data for each attribute.

1
2
3
4
5
6
7
8
yoh.xmlParser = function(xml)
{
    $(xml).find("attribute").each(function ()
    {
        trace($(this).find("name").text());
        trace($(this).find("zip").text());
    });    
}

Displaying the data in the sidebar

Create a DIV container to put the data in so that it shows up on our sidebar. The DIV can be put just under the H1 tag.

<div id="zillowdisplay"></div>

Instead of tracing the data, “append” the data to this div:

1
2
3
4
5
6
7
8
9
10
yoh.xmlParser = function(xml)
{
    $(xml).find("attribute").each(function ()
    {
        $('#zillowdisplay').append($(this).find("name").text());
        $('#zillowdisplay').append(': ');
        $('#zillowdisplay').append('<strong>'+$(this).find("zip").text()+'</strong>');
        $('#zillowdisplay').append('<br>');
    });    
}

Omitting attributes with no data

Great! The data is now displayed in the sidebar. But… some data elements returned from Zillow do not have values for the provided zipcode, and are showing up blank. Let’s eliminate these from our display by adding an “if” statement that checks to see if the value for each parameter has content. If so, show it, if not, do nothing.

1
2
3
4
5
6
7
8
9
10
11
12
yoh.xmlParser = function(xml) {
    $(xml).find("attribute").each(function ()
    {
        if ($(this).find("zip").text() != '')
        {
            $('#zillowdisplay').append($(this).find("name").text());
            $('#zillowdisplay').append(': ');
            $('#zillowdisplay').append('<strong>'+$(this).find("zip").text()+'</strong>');
            $('#zillowdisplay').append('<br>');
        }
    });    
}

(sample code)

Leave a Reply