无法使用 JavaScript 以条件动态向 JSON 对象添加新名称和值

Question

我无法添加新名称和值 ff。这个给定的条件：

 $.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;
                        }
                    }

                }
            }
        };
    });
});

我能够使用 if 语句添加一个新名称water_actual 及其值。如果 json 对象中的 datetime 与数组值（日期和时间）匹配，我想添加它的特定名称，如上所述。但我似乎无法让它工作。

这是fiddle。

Answer 1

如果我可以提供一些一般性反馈：最好将代码简化为重现问题的最小示例。这不仅可以大大增加您自己解决问题的机会，还可以增加您在这里获得帮助的几率。

考虑到这一点，考虑一下您在这里尝试的基本结构：

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);

这里，$.each 遍历someNames 中的所有内容，然后立即 进入console.log 语句。据我们所知，每个单独的 API 调用 ($.get) 可能需要几秒钟或几分钟。此时我们已经尝试使用allTheData 的内容，可能已修改也可能未修改。

为了避免遗留 JavaScript 中出现这种情况，我们可以利用 $.get 已经提供的回调：

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

在回调内部，我们确定 API 请求已经完成（尽管上面假设它成功，这完全是另一回事）。这将在响应到达时输出每个 API 请求的结果，尽管不一定按照您期望的顺序！

过去，JavaScript 的异步特性往往会导致大量回调。随着ES6 的出现，我们有了更多的选择，尤其是承诺。