Unable to loop over object after ajax response

Question

I know that this question is already asked but I could not find answer for what I want.

I am trying to loop over data that I get in JSON data format after ajax response. my Javascript Code is:

function ajaxMe(){
    $(function(){
      $.ajax({
        type : 'GET',
        url : 's-test.php'
      }).done(function(data){
        values = [data];
        alert(data)
      })
    });
  }

After receiving the data in values variable successfully I am trying to print it using console.log(JSON.stringify(values)) in console and this gives result as:

["\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.320850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.420850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.520850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.620850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.720850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.820850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-0.920850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-1.320850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-2.320850\" , \"name\" : \"my corporation\"},\r\n  {\"lat\" : \"51.508742\", \"ln\" : \"-3.320850\" , \"name\" : \"my corporation\"}\r\n"]

instead of

[{"lat" : "51.508742", "ln" : "-0.320850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.420850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.520850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.620850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.720850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.820850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-0.920850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-1.320850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-2.320850" , "name" : "my corporation"},
  {"lat" : "51.508742", "ln" : "-3.320850" , "name" : "my corporation"}]

And unable to loop over this object when using forEach :

values.forEach(function(v, i){
    alert(i);
});

How it can work.? Thank you.

You are conveting the data to string. Try to use JSON.parse(data) to get the JSON object back. — Akshay
– Akshay, Commented Aug 25, 2016 at 12:06
If that is your data, looks like you server is not returning the data right — epascarello
– epascarello, Commented Aug 25, 2016 at 12:06
Another victim of the inexplicable JSON.stringify trend. Nowadays, we are flooded with people who convert a data structure (JSON) into a linear chain of characters (string) and then don't understand why they can't see their data structure anymore. I just can't explain how everyone got to do that. — Jeremy Thille
– Jeremy Thille, Commented Aug 25, 2016 at 12:07
instead of JSON.stringify I am unable to loop over the data and when I loop over the data it run only once and return whole object instead of running one by one. — Syed Aqeel
– Syed Aqeel, Commented Aug 25, 2016 at 12:13

Sanooj T · Accepted Answer · 2016-08-25 12:21:33Z

5

First of all add a simple line to your jquery ajax code dataType: 'json'

$.ajax({
        type: 'GET',
        url: 's-test.php',
        dataType: 'json',
        success: function (data) {               
            $.each(data, function (key, value) {                     
                alert(value.lat);
            });               
        }
    });

edited Aug 25, 2016 at 12:21

answered Aug 25, 2016 at 12:05

Sanooj T

1,3471 gold badge14 silver badges27 bronze badges

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

Comments

sanjay verma · Accepted Answer · 2016-08-25 12:24:17Z

2

try this:

function ajaxMe(){  
  $.ajax({
    method:"GET",
    url : 's-test.php',
    success:function(data){
      var obj = $.parseJSON(data);        
      $.each(obj, function (key, value){                     
          alert(value.lat);
          alert(value.ln);
          alert(value.name);
      });
    }
  });

}

edited Aug 25, 2016 at 12:24

answered Aug 25, 2016 at 12:16

sanjay verma

2571 silver badge8 bronze badges

Comments

avenged_badger · Accepted Answer · 2016-08-25 12:38:20Z

1

When you echo the data from the PHP script, use json_encode(your data). This will return a JSON object. Then in the AJAX request set the 'dataType: "json"'. You will then be able to use console.log(data).

$.ajax({
    type : 'GET',
    url : 's-test.php'
    dataType: 'json',
  }).done(function(data){
    values = [data];
    alert(data)
  })

You will then be able to use a for loop to loop through the results like this:

for(var i = 0; i < data.legnth; i++){
    console.log(data[i]);
}

json_encode() documentation

answered Aug 25, 2016 at 12:38

avenged_badger

1137 bronze badges

Collectives™ on Stack Overflow

Unable to loop over object after ajax response

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related