Can't add new name and value to JSON object dynamically with condition using JavaScript

Question

I can't add new name and value ff. this given condition:

 $.each(names, function (i, name) {
    $.get('https://www.example.com/path/' + name, function (data) {
        var arrNow = CSVToArray(data, ',');
        allArr.push(arrNow);
        counter++;
        if (counter === names.length) {
            for (var j = 0; j < allArr.length; j++) {
                for (var k = 1; k < allArr[j].length; k++) {
                    //console.log(allArr[j][k][0] + ': ' + allArr[j][k][1]);
                    //var f = moment(allArr[j][k][0]).format('lll');  
                    var f = allArr[j][k][0];
                    json.push({
                        "datetime": f
                    });
                    if (j == 0) {
                        if (json[k].datetime === allArr[0][k][0]) {
                            var newAtt = "water_actual";
                            var newValue = allArr[0][k][1];
                            json[k][newAtt] = newValue;
                        }
                    }
                    if (j == 1) {
                        if (json[k].datetime === allArr[1][k][0]) {
                            var newAtt = "rainfall_actual";
                            var newValue = allArr[1][k][1];
                            json[k][newAtt] = newValue;
                        }
                    }if (j == 2) {
                        if (json[k].datetime == allArr[2][k][0]) {
                            var newAtt = "forecast_water";
                            var newValue = allArr[2][k][1];
                            json[k][newAtt] = newValue;
                        }
                    }

                }
            }
        };
    });
});

I was able to add a new namewater_actual and its value using if statement. If the datetime from the json object matches to the array value(date and time), I'd like to add it with its specific name as stated above. But I can't seem to make it work.

Here's the fiddle.

Answer 1

If I may provide some general feedback: it's probably good practice to simplify your code to the minimum example that reproduces your problem. Not only can that drastically increase your chances of fixing it yourself, it also increases the odds that you'll get help here.

With that in mind, consider the basic structure of what you're trying here:

var someNames = ["foo", "bar"];    
var allTheData = [{
  "aardvark": true
}];

$.each(someNames, function (i, name) {
  $.get('http://example.com/api/' + name, function (data) {
    data.aNewProperty = 'wombat';
    allTheData.push(data);
  });
});

console.log(allTheData);

Here, $.each iterates through everything in someNames and then proceeds immediately to the console.log statement. For all we know, each individual API call ($.get) could take seconds, or minutes. By this time we've already tried to use the contents of allTheData, which may or may not have been modified.

To avoid this sort of thing in legacy JavaScript we can make use of the callback already provided by $.get:

  $.get('http://example.com/api/' + name, function (data) {
    data.aNewProperty = 'wombat';
    console.log(data);
  });

Inside the callback, we know for sure that the API request has already completed (although the above assumes that it succeeded, which is a whole other kettle of fish). This would output the result of each API request as the responses arrive, though not necessarily in the order you'd expect!

JavaScript's asynchronous nature tended to lead in the past to a whole lot of callbacks. With the advent of ES6 we have some more options available to us, especially promises.