How to loop through object in Jquery?

Question

I am getting TypeError: field[i] is undefined from this:

function ObserverFetch() {

               $.ajax({
                   type: "POST",
                   url: "Observer.aspx/ObserverFetch",
                   data: JSON.stringify({ id: "" }),
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   async: true,
                   success: function (data, status) {

                       $.each(data, function (i, field) {

                           alert(field[i].BidderName);
                           //$('#dvBids').text(field);
                           //$("#gvDetails").append("<tr><td>" + field.SrNo + "</td><td>" + field.BidderName + "</td><td>" + field.BidAmt + "</td></tr>");
                       });                     
                   },
                   failure: function (data) {
                       alert(data.d);
                   },
                   error: function (data) {
                       alert(data.d);
                   }
               });
       }

This is what I get in field

[{"SrNo":4,"BidderName":"faisal","BidAmt":6000000.0000,"BidDate":"\/Date(1430199508063)\/"},{"SrNo":3,"BidderName":"arbaaz jalil","BidAmt":5000010.0000,"BidDate":"\/Date(1430199494083)\/"},{"SrNo":2,"BidderName":"arbaaz","BidAmt":500000.0000,"BidDate":"\/Date(1430199483530)\/"},{"SrNo":1,"BidderName":"shekhar1","BidAmt":5000.0000,"BidDate":"\/Date(1430199394957)\/"}]

$('#dvBids').text(JSON.stringify(data)); gives me :

{"d":"[{\"SrNo\":4,\"BidderName\":\"faisal\",\"BidAmt\":6000000.0000,\"BidDate\":\"\\/Date(1430199508063)\\/\"},{\"SrNo\":3,\"BidderName\":\"arbaaz jalil\",\"BidAmt\":5000010.0000,\"BidDate\":\"\\/Date(1430199494083)\\/\"},{\"SrNo\":2,\"BidderName\":\"arbaaz\",\"BidAmt\":500000.0000,\"BidDate\":\"\\/Date(1430199483530)\\/\"},{\"SrNo\":1,\"BidderName\":\"shekhar1\",\"BidAmt\":5000.0000,\"BidDate\":\"\\/Date(1430199394957)\\/\"}]"}

$.each(data.d , function (i, field) { gives me :

TypeError: invalid 'in' operand a

T.J. Crowder · Accepted Answer · 2015-04-28 07:08:57Z

5

Bizarrely, the response from your server is a JSON object with a single property, d, which is a string containing the JSON for an array. If it's your server method generating that response, you probably want to adjust it so that data.d is an array, not a string.

To get those results and loop through them, you'll need to parse it, and then use field directly rather than via i:

var fields = JSON.parse(data.d);
$.each(fields, function(i, field) {
    alert(field.BidderName);
});

or of course:

$.each(JSON.parse(data.d), function(i, field) {
    alert(field.BidderName);
});

Side note: As the parsed version of data.d is an array, on any modern browser you can use Array#forEach rather than $.each, which has a slightly less-confusing argument list for the callback. (Array#forEach can be easily polyfilled on IE8 and earlier.)

JSON.parse(data.d).forEach(function(field) {
    alert(field.BidderName);
});

Live Example of both:

var data = {
    "d": "[{\"SrNo\":4,\"BidderName\":\"faisal\",\"BidAmt\":6000000.0000,\"BidDate\":\"\\/Date(1430199508063)\\/\"},{\"SrNo\":3,\"BidderName\":\"arbaaz jalil\",\"BidAmt\":5000010.0000,\"BidDate\":\"\\/Date(1430199494083)\\/\"},{\"SrNo\":2,\"BidderName\":\"arbaaz\",\"BidAmt\":500000.0000,\"BidDate\":\"\\/Date(1430199483530)\\/\"},{\"SrNo\":1,\"BidderName\":\"shekhar1\",\"BidAmt\":5000.0000,\"BidDate\":\"\\/Date(1430199394957)\\/\"}]"
};

snippet.log("Using $.each:");
$.each(JSON.parse(data.d), function(i, field) {
  snippet.log(field.BidderName);
});

snippet.log("----");
snippet.log("Using forEach");
JSON.parse(data.d).forEach(function(field) {
  snippet.log(field.BidderName);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

edited Apr 28, 2015 at 7:08

answered Apr 28, 2015 at 6:54

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SamuraiJack Over a year ago

thanks it your solution worked. I have added the serverside code in my question. I am pretty noob when it comes to Jquery/ajax requests.

T.J. Crowder Over a year ago

@Arbaaz: Glad this helped. I'd remove the server-side code from the question and post a new question saying "How can I make this code return an array for data.d rather than a string?" (including the JSON it currently returns). Best,

SamuraiJack Over a year ago

going to do exactly that.

Erik Lucio · Accepted Answer · 2015-04-28 07:17:28Z

-1

The problem is that in var fiel you already have a each element of the array. The solutiobn is:

$.each( obj, function (i, field) {
  alert(field.BidderName );
});

answered Apr 28, 2015 at 7:17

Erik Lucio

9487 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to loop through object in Jquery?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related