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) +"}");


}

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

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

2 个答案: