convert json response to javascript arrays

Question

I'm getting json response from my webserver by $.getJSON . This is the response :

[{"id":"1","latitude":"28.63","longitude":"77.21","price":"0"},{"id":"2","latitude":"28.71","longitude":"77.19","price":"100"}]

And this is my javascript code to convert this response to arrays :

var i = 0;
var vehicleId = $('#selectVehicle option:selected').val();
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
    var lat = [];
    var lon = [];
    var price = [];
    $.each(data, function(key, value){
        lat.push(value.latitude);
        lon.push(value.longitude);
        price.push(value.price);
        i++;
    });
});
console.log(i);

But when I see the value of i in console it doesn't changes . it's still 0. It means nothing is happening inside $.each() . I'm totally new to javascript. Any help will be appreciated.

Your code works just fine in a fiddle http://jsfiddle.net/tBUnz/ — Benjamin Gruenbaum, Jul 17 '13 at 05:53
@BenjaminGruenbaum no it is not .. I've edited the question with formatted code — Arun P Johny, Jul 17 '13 at 05:55
@BenjaminGruenbaum the variable `i` is incremented inside the async callback — Arun P Johny, Jul 17 '13 at 05:56
@omerjerk Because the AJAX hasn't returned yet. I'm mistaken and missed your issue. See the Post ArunPJohny linked to. — Benjamin Gruenbaum, Jul 17 '13 at 06:00

Shawn31313 · Accepted Answer · 2013-07-17T05:59:05.350

Try this out:

var i = 0;
var vehicleId = $('#selectVehicle option:selected').val();
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
    var lat = [];
    var lon = [];
    var price = [];
    $.each(data, function (i, item) {
        $.each(item, function(key, value){
            lat.push(value.latitude);
            lon.push(value.longitude);
            price.push(value.price);
            i++;
        });
    });
    console.log(i);
});

Your main problem was that because AJAX is A(synchronous)J(avascript)A(nd)X(ML), notice asynchronous, you console.log(i) was being fired before the request was finished. The other problem I noticed was that you were trying to only loop though an object. While your JSON starts with an array which also have to be looped though.

Just a suggestion. Native loops are pretty easy and function faster. I suggestion not using $.each:

var i = 0;
var vehicleId = $('#selectVehicle option:selected').val();
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
    var lat = [];
    var lon = [];
    var price = [];
    for (var i = 0, item = data[i]; i < data.length; i++) {
        for (var key in item) {
            var value = key[item];
            lat.push(value.latitude);
            lon.push(value.longitude);
            price.push(value.price);
            i++;
        };
    };
    console.log(i);
});

Now, I realize that jQuery was made to make your job easier. But I think it is just causing developers to become lazy. I think jQuery is amazing. But i've stopped using $.each once I realized that native loops are easy c:

A -1 does not indicate me not liking you or anything personal. All it does is indicate that I found something wrong with your answer and wanted you to correct it. In the original version it was similar to OP's code, now that you moved the log to inside the callback it makes sense. — Benjamin Gruenbaum, Jul 17 '13 at 05:58

iJade · Answer 2 · 2013-07-17T06:08:28.683

0

Try this code

var i = 0;
var vehicleId = $('#selectVehicle option:selected').val();
var jsonData;
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){

    jsonData = data;
});
var lat = [];
    var lon = [];
    var price = [];
$.each(jsonData, function(key, value){
        lat.push(value.latitude);
        lon.push(value.longitude);
        price.push(value.price);
        i++;
    });
console.log(i);

edited Jul 17 '13 at 06:08

answered Jul 17 '13 at 05:58

iJade

23,144
56
154
243

He wanted to log the last value of `i`, not the value on every iteration. – Benjamin Gruenbaum Jul 17 '13 at 05:59
hey says "value of i in console it doesn't changes . it's still 0. It means nothing is happening inside $.each()" the above modification will show that the value of i changing – iJade Jul 17 '13 at 06:02
Read his code carefully. His console.log is _outside_ the getJSON which means deferred execution will stop it from incrementing before the AJAX returns. – Benjamin Gruenbaum Jul 17 '13 at 06:02

score 0 · Answer 3 · answered Jul 17 '13 at 06:15

Using asynchronous functions in javascript can sometimes be confusing, here is why

EXAMPLE:

var result = 'pending';
$.ajax({
  url: 'something.php',
  success: function() {
    result = 'success';
  }
});

Now if we want to use result here we would not get a good result

console.log(result); // 'pending'

So instead I think you're better off calling 'function' on that one like this

var makeArray = function( data ) {
    var i = 0,
        vehicleId = $('#selectVehicle option:selected').val(),
        lat = [], lon = [], price = [];

    $.each(data, function(key, value){
        lat.push(value.latitude);
        lon.push(value.longitude);
        price.push(value.price);
        i++;
    });
    console.log(i);
}; 

$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
    makeArray( data );
});

digiliooo · Answer 4 · 2013-07-17T06:04:12.047

Just use the index:

var data = [{"id":"1","latitude":"28.63","longitude":"77.21","price":"0"},
            {"id":"2","latitude":"28.71","longitude":"77.19","price":"100"},
            {"id":"2","latitude":"28.71","longitude":"77.19","price":"100"}];
var i;
var lat = [];
var lon = [];
var price = [];

$.each(data, function(index, value){
    lat.push(value.latitude);
    lon.push(value.longitude);
    price.push(value.price);
    i = index;
});

console.log(i);

Check out this fiddle, I think it should be doing what you want

http://jsfiddle.net/vmy3b/3/

convert json response to javascript arrays

4 Answers4