在函数中修改的对象没有在函数外被修改

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。

驱动参数是上面代码中传入的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 变量通过调用函数获得一个值，那么让它成为该函数的 return 值，因此您可以这样调用它：

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 中执行此操作：

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