duke duke - 6 months ago 12
Javascript Question

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

Answer

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);

  });
Comments