在函数中修改的对象未在函数外部修改

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()将它们解析为对象的函数。

驱动程序参数是在上述代码中传递的对象。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) +"}");

}

这是显示驱动程序功能。

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

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