duke
duke

Reputation: 1874

unable to iterate through json array from $.ajax

I am facing some problem in assigning data to div on my view page. The code is something like this:

$.ajax({
  url: "/api/Flight/SearchFlight",
  type: "Post",
  data: $('form').serialize() + '&' + $.param({
    'TokenId': $("#pageInitCounter").val()
  }, true),
  success: function(data) {
    alert(data);
    $('#responsestatus').text(data.Response);
    $('#divResult').html(data);
  });

Here, as you can see, I can see the whole data in alert box. also, I have assigned the whole data to div and i can see whole data perfectly on my page. The Sample Response which i got back is a huge data so i am posting link for it http://pastebin.com/eEE72ySk

Now I want to iterate through each and every data but unable to do it. Example:

 $('#responsestatus').text(data.Response.ResponseStatus); 

Then error is:

UncaughtTypeError:Cannot read property 'ResponseStatus' of undefined

Please Someone tell me what is wrong here. Why cant I iterate over data in response

Upvotes: 0

Views: 612

Answers (2)

Jamiec
Jamiec

Reputation: 136154

You are getting your response back as a string, but trying to operate on it like it were a javascript object.

There is one of two things you could do

  1. Tell the server you're expecting json data back
  2. Parse the string response to json after it is received.

The first should be as simple as setting the datatype property on the request

$.ajax({
  url: "/api/Flight/SearchFlight",
  type: "Post",
  datatype: 'json',
  data: $('form').serialize() + '&' + $.param({
    'TokenId': $("#pageInitCounter").val()
  }, true),
  success: function(data) {
    $('#responsestatus').text(data.Response.ResponseStatus);
  });

The second involves parsing the response before using it

$.ajax({
  url: "/api/Flight/SearchFlight",
  type: "Post",
  data: $('form').serialize() + '&' + $.param({
    'TokenId': $("#pageInitCounter").val()
  }, true),
  success: function(data) {
    var result = JSON.parse(data);
    $('#responsestatus').text(result.Response.ResponseStatus);

  });

Upvotes: 2

Use Json datatype..i wrote a sample here..

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Upvotes: 2

Related Questions