CODEWITHSUNDEEP
javascriptjqueryjson
coding4fun
coding4fun

Reputation: 8199

length property is working differently between firefox & IE/Chrome

$($.ajax({
    url: 'http://localhost:3606/runs',
    //beforeSend: function (xhr) {
    //    xhr.setRequestHeader("Origin", "http://localhost:2286/");
    //},
    success: function(data) {
        for (var i = 0; i < data.length; i++) {
            var list = $('#runs');
            list.append('<li id="' + data[i].RunId + '">' + data[i].Distance + "</li>");
        }
     }
}))

The following code works correctly in ie10 & chrome 22. It doesn't in firefox 15.0.1 The data variable above is being returned from a rest service (web api). Here is the json its returning: 

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
Access-Control-Allow-Origin: *
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcQnJlbnRcRG9jdW1lbnRzXFZpc3VhbCBTdHVkaW8gMjAxMlxQcm9qZWN0c1xURlNcUnVuTG9nXE1haW5cUnVuTG9nXHJ1bnM=?=
X-Powered-By: ASP.NET
Date: Fri, 28 Sep 2012 16:04:47 GMT
Content-Length: 197

[{"RunId":1,"Date":"2012-09-28T00:00:00","Distance":4.00,"Hours":null,"Minutes":35,"Seconds":null},{"RunId":2,"Date":"2012-09-28T00:00:00","Distance":6.00,"Hours":null,"Minutes":50,"Seconds":null}]

data.length in ie & chrome is 2. data.length in firefox is 197. Here is what the data variable looks like in firefox:

"[{"RunId":1,"Date":"2012-09-28T00:00:00","Distance":4.00,"Hours":null,"Minutes":35,"Seconds":null},{"RunId":2,"Date":"2012-09-28T00:00:00","Distance":6.00,"Hours":null,"Minutes":50,"Seconds":null}]"

In ie/chrome it looks like:

<ul id="runs">
    <li id="1">4</li>
    <li id="2">6</li>
</ul>

In Firefox:

<ul id="runs">
   <li id="undefined">undefined</li>
   ...197 times
</ul>

Anyone know why firefox is not working correctly?

Upvotes: 0

Views: 172

Answers (2)

Dr.Molle
Dr.Molle

Reputation: 117354

add the dataType-option to the $.ajax-call:

$($.ajax({
    url: 'http://localhost:3606/runs',
    dataType:'json',
    //beforeSend: function (xhr) {
    //    xhr.setRequestHeader("Origin", "http://localhost:2286/");
    //},
    success: function(data) {
        for (var i = 0; i < data.length; i++) {
            var list = $('#runs');
            list.append('<li id="' + data[i].RunId + '">' + data[i].Distance + "</li>");
        }
     }
}))

Upvotes: 1

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14302

I guess you need to parse your data into json. Currently it is coming in string format and firefox treating it like string. So instead try this code :

$($.ajax({
    url: 'http://localhost:3606/runs',
    //beforeSend: function (xhr) {
    //    xhr.setRequestHeader("Origin", "http://localhost:2286/");
    //},
    success: function(data) {
        var result = JSON.parse(data);
        for (var i = 0; i < result.length; i++) {
            var list = $('#runs');
            list.append('<li id="' + result[i].RunId + '">' + result[i].Distance + "</li>");
        }
     }
}))

Hope this will help !!

Upvotes: 1

Related Questions