How to loop each JSON value after is retrieving its data through AJAX

Question

var buttonOptions = {
  gmap: map,
  name: 'Download JSON File',
  position: google.maps.ControlPosition.TOP_RIGHT,
  action: function () {
    $.ajax({
      type:"GET",
      contentType: "application/json; charset=utf-8",
      url: "getJSON.php",
      data: "{}",
      //dataType: 'json',
      cache:false,
      success: function(data){
      }
    });
  }
}

I have a button that returns the JSON file below

[{"marker_title":"Santa Venera","marker_description":"Hometown","longitude":"","latitude":"","icon":"undefined"},{"marker_title":"Hamrun","marker_description":"Street","longitude":"0.1709747314453125","latitude":"51.44395066709662","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"},{"marker_title":"PlaceA","marker_description":"PlaceA","longitude":"0.292510986328125","latitude":"51.40884344813292","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceB","marker_description":"PlaceB","longitude":"0.232086181640625","latitude":"51.434106241971826","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceC","marker_description":"PlaceC","longitude":"0.07656097412109375","latitude":"51.43325010472878","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"Home","marker_description":"Town","longitude":"0.1764678955078125","latitude":"51.43753063050015","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/library_maps.png"},{"marker_title":"PLACED","marker_description":"PLACED","longitude":"0.26641845703125","latitude":"51.41783689062198","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"FF","marker_description":"EEE","longitude":"0.2053070068359375","latitude":"51.426828563976954","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"Qormi","marker_description":"Road","longitude":"14.471054077148438","latitude":"35.875419840918845","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"}]

My question is, how am I going to loop and display each field in the Success function? I tried using $.each to no avail. Also how can I count each value. I used $('#msg').html(data.length);, however it is counting each character in the JSON file, instead of the actual value. Thanks.

Possible duplicate of [looping over a json object array with jquery](http://stackoverflow.com/questions/6191646/looping-over-a-json-object-array-with-jquery) — nyedidikeke, May 20 '17 at 17:11

cнŝdk · Answer 1 · 2017-05-21T23:41:36.793

I used $('#msg').html(data.lenght);, but it is counting each character in the JSON file, instead of the actual value.

It's quite evident because you haven't parsed the JSON yet, so data is evaluated as a string here.

Solution:

You need to parse the JSON data before trying to access it. So your code need to be like this:

success: function(data){
    data = JSON.parse(data);
    $('#msg').html(data.length);
}

how am I going to loop and display each field in the Success function?

And then you can loop over dataafter it's parsed with .each():

success: function(data){
    data = JSON.parse(data);
    $('#msg').html(data.length);
    data.each(function(){
      //Your code here
    });
}

Edit:

Another thing in your Ajax call why are you using url: "getJSON.php"? In that case the Ajax call will just load the content of the PHP file as a string.

In the URL you should put your .json file or a web service that returns a JSON string.

Demo:

Here's a Demo snippet showing the problem in details and where did 1610 came from in data.length :

var json = '[{"marker_title":"Santa Venera","marker_description":"Hometown","longitude":"","latitude":"","icon":"undefined"},{"marker_title":"Hamrun","marker_description":"Street","longitude":"0.1709747314453125","latitude":"51.44395066709662","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"},{"marker_title":"PlaceA","marker_description":"PlaceA","longitude":"0.292510986328125","latitude":"51.40884344813292","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceB","marker_description":"PlaceB","longitude":"0.232086181640625","latitude":"51.434106241971826","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"PlaceC","marker_description":"PlaceC","longitude":"0.07656097412109375","latitude":"51.43325010472878","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/info-i_maps.png"},{"marker_title":"Home","marker_description":"Town","longitude":"0.1764678955078125","latitude":"51.43753063050015","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/library_maps.png"},{"marker_title":"PLACED","marker_description":"PLACED","longitude":"0.26641845703125","latitude":"51.41783689062198","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"FF","marker_description":"EEE","longitude":"0.2053070068359375","latitude":"51.426828563976954","icon":"https:\/\/maps.google.com\/mapfiles\/kml\/shapes\/parking_lot_maps.png"},{"marker_title":"Qormi","marker_description":"Road","longitude":"14.471054077148438","latitude":"35.875419840918845","icon":"https:\/\/maps.gstatic.com\/mapfiles\/ms2\/micons\/tree.png"}]';

//logging json.length without parsing it
console.log('logging json.length without parsing it');
console.log(json.length);
var data = JSON.parse(json);
//logging data.length after parsing it
console.log('logging data.length after parsing it');
console.log(data.length);

Thanks for your answer @chsdk. I don't know why it won't output the length value when it parsed. It does when I remove the data = JSON.parse(data); line, but the result is about 1600 which is not the value I want. — N.Cre, May 20 '17 at 17:17
@N.Cre Make suer it's `.length`, because you wrote it as `.lenght` in your post, it should work this way. — cнŝdk, May 20 '17 at 17:19
And what do you get when you print it in console? Try to write `console.log(data)` and see what do you get in your browser console? — cнŝdk, May 20 '17 at 17:23
I'm getting this error..Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at Object.success (map.html:149) at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at A (jquery.min.js:4) at XMLHttpRequest. (jquery.min.js:4) — N.Cre, May 20 '17 at 18:23
I think the problem comes from the php file, why are you using `getJson.php` in the URL? it should be your JSON file instead — cнŝdk, May 20 '17 at 22:06
@N.Cre have you checked my edit? Does it solve your problem?! — cнŝdk, May 25 '17 at 06:46

Alessi 42 · Answer 2 · 2017-05-20T17:12:58.740

0

As @chsdk said data is returned being as a string instead of a Javascript object you may want to take a look at $.getJSON() instead of $.ajax() for iterating over JSON objects

$.getJSON( "getJSON.php", function( data ) {
    var count = data.length;
    $.each( data, function( key, val ) {
        //perform operations on data
    });
});

http://api.jquery.com/jquery.getjson/

edited May 20 '17 at 17:12

answered May 20 '17 at 17:05

Alessi 42

1,112
11
26

How to loop each JSON value after is retrieving its data through AJAX

2 Answers2