Объект, измененный в функции, не изменяется вне функции

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

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

Answer 2

Одна проблема заключается в том, что внутри 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
}