函數中修改的對象未在函數外部進行修改

Question

我正在構建一個代碼來將從服務器收到的一些JSON詳細信息解析為javascript對象。 該對象內部有許多對象。

然后我有另一個函數來創建HTML元素並將該對象的值（使用for - in循環）應用到HTML標記的“ innerHTML ”中。

我已經包含了我在下面使用的代碼，

// This one is executed on the 'onLoad' event.

function requestDriverListings() {

**//This object stores the received object from server.**

var drivers = {};

// ***This function requests details from the server and the function in the arguments is executed once the details are received.***


sendUserData ({}, "request driver.php", function (request) {
listDrivers(request,drivers); console.log(drivers); displayDrivers(drivers);});

}

這個是創建HTML Element並將接收到的數據存儲在其中的函數，並使用JSON.parse()將它們解析為Object。

driver參數是上面代碼中傳遞的Object。 request參數對此問題沒有影響。 （這是XHR responseText 。）

function listDrivers (request,driver) {
    var response = document.createElement("html");
    response.innerHTML = request;
    driver = response.querySelector("#drivers").innerHTML;
    var stripComma = driver.lastIndexOf(",");
    driver = JSON.parse(driver.substring(0,stripComma) +"}");


}

這是displayDrivers函數。

drivers對象在第一個函數中傳遞給driveParsed 。

requestAPage()是一個從服務器請求顯示元素的函數。 該function在它的參數是對對象的詳細信息應用到的功能HTML innerHTML 。

function displayDrivers (driveParsed) {
    var driverElement = document.createElement("div");
    driverElement.id = "driverElement";
    driverElement.style.display = "none";
    document.getElementById("driverContainer").appendChild(driverElement);

    requestAPage("Drivers.html", "drivers", "driverElement", function() {  selectDrivers();});


    var selectDrivers = function () {

    for (var x=0; x<=Object.keys(driveParsed).length; x++) {
         var driverParsed = driveParsed[x];
         setDriversDetails(driveParsed,x);
         var element = createAElement( "div", {"margin-top": "10px;"});
         element.id = driveParsed.name;
         element.className  = "container border";
         element.innerHTML = driverElement.innerHTML;
         document.getElementById("driverContainer").appendChild(element);

    }

    };


}

================================================== ==============

我的問題是這個displayDrivers()沒有得到修改過的drivers對象。

請幫我解決這個問題。 很抱歉有很長的描述。

Answer 1

一個問題是在listDrivers內部為driver變量（這是一個參數） 分配一個新值。 這意味着作為第二個參數傳遞給函數的原始變量drivers與本地函數變量driver斷開連接：它們現在是兩個不同的，不相關的對象。

如果你想讓drivers變量從調用函數中獲取一個值，那么讓它成為函數的返回值，所以你可以像這樣調用它：

sendUserData ({}, "request driver.php", function (request) {
    var drivers = listDrivers(request);  // <-----
    console.log(drivers); 
    displayDrivers(drivers);
});

然后listDrivers函數看起來像這樣：

function listDrivers (request) { // <--- only one argument
    // declare new variable:
    var driver = response.querySelector("#drivers").innerHTML;
    // ... rest of your code comes here ...
    // ... and finally:
    return driver; // <---- return it
}

Answer 2

@trincot打敗了我，他的回答更好。 不管怎么說，我會留下這個。

嘗試在requestDriverListings執行此requestDriverListings ：

function requestDriverListings() {

  var drivers = {};

  sendUserData ({}, "request driver.php", function (request) {
    var updatedDrivers = listDrivers(request,drivers); 
    console.log(drivers); 
    displayDrivers(updatedDrivers);});
}

這在listDrivers ：

function listDrivers (request,driver) {
  var response = document.createElement("html");
  response.innerHTML = request;
  driver = response.querySelector("#drivers").innerHTML;
  var stripComma = driver.lastIndexOf(",");
  driver = JSON.parse(driver.substring(0,stripComma) +"}");
  return driver;
}