Object modified in the function is not being modified outside the function

Question

I'm building a code to parse some JSON details received from the server into a javascript object. The object has many objects inside it.

Then I have another function to create HTML element and apply that object's values (using for - in loop) into HTML tags' " innerHTML ".

I have included the code i use below,

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

}

This one is the function to create a HTML Element and stores the received data in it and the use JSON.parse() to parse them into a Object.

The driver parameter is the Object passed in the above code. request parameter has no effect on this problem. (It is the 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) +"}");


}

Here is the displayDrivers function.

drivers Object is passed into driveParsed in the first function.

requestAPage() is a function to request the displaying element from the server. the function in it's arguments is the function to apply the Objects details into the 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);

    }

    };


}

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

Answer 1

One problem is that inside listDrivers you assign a new value to the driver variable (which is an argument). This means the original variable, drivers , that was passed to the function as second argument, is disconnected from the local function variable driver : they are now two distinct, unrelated objects.

If you want the drivers variable to get a value from calling the function, then let that be the return value of the function, so you would call it like this:

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

Then the listDrivers function would look like this:

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 beat me to it and his answer is better. I'll leave this up anyway though.

Try doing this in requestDriverListings :

function requestDriverListings() {

  var drivers = {};

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

And this in 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;
}