只有最后一個物件被推送到物件陣列（JavaScript）

我有一個函式，它本質上創建一個物件，然后將每個新創建的物件推送到一個物件陣列中。但是我面臨一個問題，即只有最后一個正在創建的物件（在我的 for 回圈中）被推送到我的物件陣列中。

我首先宣告我的物件和物件陣列：

this.locationObjectArray = [];
this.locationObject = {};

然后我宣告一個等于“this”的變數“that”，這樣我就可以在回呼中使用上面宣告的物件和物件陣列：

var that = this;

然后我讀取了一個 odata 物體，它回傳一個帶有指定物體資料的成功回呼：

oModel.read("/Customers", {
                success: function (resp) {
                    var promises = [];
                    for (var x = 0; x < resp.results.length; x  ) {
                        // Set tooltip property
                        var tooltip = resp.results[x].Country;
                        that.locationObject.tooltip = tooltip;
                        // Set type property
                        that.locationObject.type = "Inactive";
                        // Set position property
                        var request = $.ajax({
                            url: "https://api.opencagedata.com/geocode/v1/json?key=d3e40bf9b50247d4acf8122c543c5187&q="   tooltip,
                            type: "GET",
                            dataType: 'json',
                            success: function (resp) {
                                that.locationObject.pos = resp.results[0].geometry.lng   ";"   resp.results[0].geometry.lat   ";0";
                            }
                        });
                        // Populate promises and locationObjectArray     
                        that.locationObjectArray.push(that.locationObject);
                        promises.push(request);
                        console.log(that.locationObject);
                    }
                    $.when.apply(null, promises).done(function(){
                        // console.log(that.locationObjectArray);
                        that.getView().getModel("map").setProperty("/Spots", that.locationObjectArray);
                    })
                }
            })

我創建了一個名為 Promise 的陣列，因為在我的 for 回圈中我正在向 API 發出 Ajax 請求，該 API 每次回圈時都會回傳一個 Promise。我需要包含每個請求（承諾），以便我可以將函式的其余部分設定為僅在收到每個請求（每個回圈的）中請求的所有資料后才運行。

然后我創建我的 for 回圈。

在 for 回圈中，我開始設定先前宣告的“locationObject”的每個屬性。屬性為：“tooltip”（locationObject.tooltip）、“type”（locationObject.type）和“pos”（locationObject.pos）。“工具提示”和“型別”這兩個屬性都是直截了當的。只有屬性“pos”會導致困難，因為此資料是作為每個回圈中的 promise 成功回呼的結果回傳的。

盡管如此，然后我將新創建的物件推送到物件陣列，并將回圈 promise 推送到 promises 陣列。

一旦 for 回圈完成并解決了所有承諾，我就設定了我的資料模型。

盡管結果物件陣列 (locationObjectArray) 如下所示：

整個陣列被填充（對于每個回圈），其中包含在 locationObject 中為最終回圈收集的資料。

我試圖在每個回圈開始時重置物件（locationObject）：

...
for (var x = 0; x < resp.results.length; x  ) {
    that.locationObject = {};
    ...

但是，這會干擾 Ajax 請求以獲取每個物件的“pos”屬性資料，并且僅使用“tooltip”和“type”屬性集成功構造了結果陣列：

我不確定我能做些什么來解決這個問題，或者為什么現在忽略承諾，任何建議/建議將不勝感激。

uj5u.com熱心網友回復：

這段代碼有幾個問題。我看到的主要是你只有一個locationObject你不斷修改并一遍又一遍地推入陣列的。由于.push()推送對該物件的參考（不制作副本），因此您最終會得到一個包含所有相同物件的陣列，并且它具有您處理的最后一項的值。

您可以通過locationObject在回圈中創建一個新的來解決該主要問題。以下是我對重寫的建議：

oModel.read("/Customers", {
    success: async function(resp) {
        for (let result of resp.results) {
            const locationObject = {};
            const tooltip = result.Country;
            locationObject.type = "Inactive";
            const geoData = await $.ajax({
                url: "https://api.opencagedata.com/geocode/v1/json?key=d3e40bf9b50247d4acf8122c543c5187&q="   tooltip,
                type: "GET",
                dataType: 'json',
            });
            locationObject.pos = geoData.results[0].geometry.lng   ";"   geoData.results[0].geometry.lat   ";0";
            that.locationObjectArray.push(that.locationObject);
        }
        that.getView().getModel("map").setProperty("/Spots", that.locationObjectArray);
    }
});

這使用回傳的承諾并$.ajax()擺脫success. $.ajax()它還通過序列化for回圈來簡化代碼await。

如果您想并行運行所有 ajax 呼叫并避免使用await，您可以這樣做：

oModel.read("/Customers", {
    success: function(resp) {
        Promise.all(resp.results.map(result => {
            const locationObject = {};
            const tooltip = result.Country;
            locationObject.type = "Inactive";
            return $.ajax({
                url: "https://api.opencagedata.com/geocode/v1/json?key=d3e40bf9b50247d4acf8122c543c5187&q="   tooltip,
                type: "GET",
                dataType: 'json',
            }).then(geoData => {
                locationObject.pos = geoData.results[0].geometry.lng   ";"   geoData.results[0].geometry.lat   ";0";
                return locationObject;
            });
        })).then((locationArray) => {
            that.getView().getModel("map").setProperty("/Spots", locationObjectArray);
        });
    }
});

請注意，這完全避免了使用that.locationObjectand that.locationObjectArray。結果在沒有那些更高范圍的變數的情況下在內部收集和使用。

標籤：javascript 数组 阿贾克斯 目的 承诺

上一篇：如何用其他物件替換陣列內的物件道具

下一篇：使用正則運算式按列拆分字串