Populate array in for loop (JS)

Question

I have js code

var model = {
    start: newstart,
    end: newstop,
    imei: imei
};
$.ajax({
    url: dburl,
    dataType: 'json',
    type: 'GET',
    data: model,
    success: function (data) {
         speeddata = data;

         if (speeddata.length !== 0) {
             for (var i = 0; i < speeddata.length; i++) {
                 path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                 var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                     + path + "&key=" + roadsapikey;
                 + path + "&key=" + roadsapikey;
                 $.ajax({
                     url: googleurl,
                     dataType: 'json',
                     type: 'GET',
                     success: function (data) {

                         for (var i = 0; i < data.speedLimits.length; i++) {
                             speedobject.push({
                                 speedlimits: data.speedLimits[i].speedLimit
                             });
                         }
                         console.log(speedobject);
                     }

                 });
             }

         }
    },
    error: function () {
        alert("Error");
    }
});

In this code I get data from db and write it to speeddata array, I have 6 elements in array.

   var speeddata = [{
Imei: 35745407257535, Latitude2: 50.9364, Longitude2: 3.12147, Speed: 8
},{
Imei: 35745407257535, Latitude2: 50.93918, Longitude2: 3.12485, Speed: 37
},{
Imei: 35745407257535, Latitude2: 50.93997, Longitude2: 3.12837, Speed: 7
},{
Imei: 35745407257535, Latitude2: 50.93834, Longitude2: 3.12893, Speed: 54
},{
Imei: 35745407257535, Latitude2: 50.9281, Longitude2: 3.13903, Speed: 56
},{
Imei: 35745407257535, Latitude2: 50.9219, Longitude2: 3.15888, Speed: 9
}];

After this I need to get speedlimit for every element in speeddata and write it to speedobject.

I try to it like here

 if (speeddata.length !== 0) {
             for (var i = 0; i < speeddata.length; i++) {
                 path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                 var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                     + path + "&key=" + roadsapikey;
                 + path + "&key=" + roadsapikey;
                 $.ajax({
                     url: googleurl,
                     dataType: 'json',
                     type: 'GET',
                     success: function (data) {

                         for (var i = 0; i < data.speedLimits.length; i++) {
                             speedobject.push({
                                 speedlimits: data.speedLimits[i].speedLimit
                             });
                         }
                         console.log(speedobject);
                     }

                 });
             }

         }

But I have 6 repeats when console.log speedobject.

Here is array

Screen of google api array

So if I want to display it in table I will have 36 entries instead of 6

Where is my trouble?

Thank's for help.

Answer 1

Update your code like

 if (speeddata.length !== 0) {
             for (var i = 0; i < speeddata.length; i++) {
                 path = "path=" + speeddata[i].Latitude2 + ',' + speeddata[i].Longitude2;
                 var googleurl = "https://roads.googleapis.com/v1/speedLimits?"
                     + path + "&key=" + roadsapikey;
                 + path + "&key=" + roadsapikey;
                 $.ajax({
                     url: googleurl,
                     dataType: 'json',
                     async: false, 
                     type: 'GET',
                     success: function (data) {

                             speeddata[i].speedlimits=data.speedLimits;

                     }

                 });
             }

         }

Updated the success function.

add comment if some problem

Edit: I have added async: false, to the call by that you will be able to fill speeddata object in it. Oter way is to make a callback by refactoring the code

Answer 2

As I understood it, you want to have 6 entries each with an array of speedlimits, like this:

success: function (data) {
    var speedLimits = []
    for (var i = 0; i< data.speedLimits.length;i++) {
        speedLimits.push(data.speedLimits[i].speedLimit);
    }
    speedobject.push({speedLimits: speedLimits})
    console.log(speedobject);
}