speedracer2003
speedracer2003

Reputation: 181

Unable to obtain data object from xml file with ajax

I cannot figure out what I'm doing wrong with this. It worked for me on another page but it doesn't work for this page (capitalbikeshare). The 'data' variable does contain an object but when I try to print out the length or a specific item it gives me an error msg saying that it cannot read property of null 'feed'. What am I doing wrong?

$.ajax({ 
    url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('https://www.capitalbikeshare.com/data/stations/bikeStations.xml'),
    dataType : 'jsonp',
    success: function (data) {
        var entry = data.responseData.feed.entries;
        var entry_length = entry.length;
        alert("success"+entry_length);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert("fail");
    }
});

Here is a small sample of the XML file.

 <stations lastUpdate="1447107709602" version="2.0">
 <script id="tinyhippos-injected"/>
 <station>
 <id>1</id>
 <name>20th & Bell St</name>
 <terminalName>31000</terminalName>
 <lastCommWithServer>1447107692939</lastCommWithServer>
 <lat>38.8561</lat>
 <long>-77.0512</long>
 <installed>true</installed>
 <locked>false</locked>
 <installDate>0</installDate>
 <removalDate/>
 <temporary>false</temporary>
 <public>true</public>
 <nbBikes>5</nbBikes>
 <nbEmptyDocks>5</nbEmptyDocks>
 <latestUpdateTime>1447106879008</latestUpdateTime>
 </station>
 </stations>

Upvotes: 0

Views: 120

Answers (2)

Samuel Toh
Samuel Toh

Reputation: 19328

You might want to use the JSON.stringify() api to dump out the content of your fetched data from AJAX to see if that property indeed exists.

success: function (data) {
    console.log('Dumping data object -> ' + JSON.stringify(data, null, 4));
}

If you are using chrome you can access the console output panel via "ctrl + shift + j".

Upvotes: 0

gre_gor
gre_gor

Reputation: 6774

That web service is intended to parse rss feeds not arbitrary XML.

Proper AJAX call

$.ajax({ 
    url: 'http://ajax.googleapis.com/ajax/services/feed/load',
    dataType : 'jsonp',
    data: {
        v: "1.0",
        num: 10,
        q: 'https://www.capitalbikeshare.com/data/stations/bikeStations.xml'
    },
    success: function (data) {
        console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus);
    }
});

responds with

{
    "responseData": null,
    "responseDetails": "Feed could not be loaded.",
    "responseStatus": 400
}

by trying data.responseData.feed.entries you obviously can't access feed if responseData is null.

If you use a different web service like cors.io you can, instead of loading JSON, load xml and then access fields with jQuery.

$.ajax({
    url: 'http://cors.io',
    dataType : 'xml',
    data: {
        u: 'https://www.capitalbikeshare.com/data/stations/bikeStations.xml'
    },
    success: function (data) {
        console.log(data);
        $(data).find(">stations>station>name").each(function(){
            console.log($(this).text());
        });
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus);
    }
});

Upvotes: 1

Related Questions