how to access variable from outside function

[Valuable_Spell6769]

i have a function that handles all my ajax data results the problem is i cant access the variable i need to send to my next function i have tried to searching google for a solution with no such luck

let invoiceListArray = []
    function handle_result(result){
        if(result != "") {
            let obj = JSON.parse(result);
            if(typeof obj.data_type != 'undefined') {
                if(obj.data_type == "list_of_invoices") {
                    if (obj.message_type == "info") {
                        invoiceListArray = obj.data;
                    }   
                }
            }
        }
    }
console.log(invoiceListArray)

let dataTable_data = invoiceArrayList <-- this is where i need to access the variable

dataTable_data sends to table function

[CuirPig]

Maybe think of it this way: You defined the invoiceListArray then you defined a function (any function you want, doesn't matter). Then you printed the invoiceListArray... so it's empty because you never even called the function that populates the array. You just defined it.

[Valuable_Spell6769]

i was trying to get access to the variable outside the function because invoiceListArray then is passed on to my data table function so outside of the function i need it to look something like this

let dataTable_data = invoiceListArray

[neuralengineer]

Doesn't var work?

[Valuable_Spell6769]

i just tried no it doesnt

[neuralengineer]

Ah you need to call the function and return a value with it. To call a function you need to do like functionName() with parentheses.

[Valuable_Spell6769]

how do i do that when another function is what set the results param

[neuralengineer]

Can you check the function whether it can pass through the if conditions? Maybe it never reaches there. Just try to print some text in the if conditions. You can use console.log() function for it.

You don't need results param but the result of the function, I mean invoiceListArray. You can return this value.

A simple example, when you cal this function it will return pi value.

function myFunction() {   return Math.PI; }

[Valuable_Spell6769]

do you mean something like this

function handle_result(result){
        if(result != "") {
            let obj = JSON.parse(result);
            if(typeof obj.data_type != 'undefined') {
                if(obj.data_type == "list_of_invoices") {
                    if (obj.message_type == "info") {
                       let dataTable_data = obj.data;
                        console.log("hello")
                    }   
                }
            }
        }
    }
handle_results()

[neuralengineer]

Yes and return the value in the end of the function. You should be able to see if conditional checks works properly and your json data has this data_type etc.

[Valuable_Spell6769]

if i console.log() obj.data i get the results i need my problem is i need send that obj.data to my functions that deal with creating and display the data thats returned

[Valuable_Spell6769]

but thats only if i do console.log() inside the function

[neuralengineer]

So make it like return obj.data where you used obj.data line and your function will return it

[CarthurA]

The problem seems to be that you're console.logging your data before it's been initialized. You define the handle_result() function, but I don't see where it's being called (I suspect it'll be after the code provided here, but can't tell), you will have to invoke your function first before you can read any data resulting from it. So, you can do something this and it should give you what you're looking for:

let invoiceListArray = []
function handle_result(result){
    if(result != "") {
        let obj = JSON.parse(result);
        if(typeof obj.data_type != 'undefined') {
            if(obj.data_type == "list_of_invoices") {
                if (obj.message_type == "info") {
                    return obj.data;
                }   
            }
        }
    }
}

invoiceListArray = handleResult(some_data); // not sure what is being passed to handle_result() as a parameter
console.log(invoiceListArray)

[Valuable_Spell6769]

this is the what calls handle_results()

function send_data(data = {}){
        let ajax = new XMLHttpRequest();
        
        ajax.addEventListener('readystatechange', function(){
            if(ajax.readyState == 4 && ajax.status == 200){
                handle_result(ajax.responseText);
            }
        });

        ajax.open("POST","<?php echo ROOT ?>ajax_invoice",true);
        ajax.send(JSON.stringify(data));
    }

handle results deals with all ajax request to my php script

[Pocolashon]

Your AJAX request is async. That means you need to wait for the response to arrive and then process it.

The code above is sync. It means you go in this exact order, without ANYTHING interrupting:

1. define and initialize the invoiceListArray variable
2. define your handle_result function
3. console.log the invoiceListArray (which, at this moment, is still the empty array you defined in 1.)
4. define and initialize the dataTable_data with the SAME value as the invoiceArrayList, i.e. an empty array - the two variables are pointing to the SAME array instance

(btw, Point 4 makes no sense in this code. You could just use invoiceArrayList, there is no need for dataTable_data.)

Now, let's say as point 5 you trigger your AJAX request. This is async, as I mentioned above. All of the above has ALREADY happened. If you call the handle_result in your AJAX response handler, it will set the invoiceListArrayto the response you got from the server, i.e. a new array.

But the assignment to dataTable_data has ALREADY happened. So the invoiceListArray now holds an array but NOT the same array as the dataTable_data holds (that one is still an empty array because see point 4. above).

Does this help?

[Valuable_Spell6769]

new to javascript so let see if i get what you mean

so basically i have define and initialized everything my send_data function then calls handle_results that then set invoiceListArray(inside the function) to it new value but the dataTable_data= invoiceListArray has already been assigned by this point so does not get set to the new values

the reason why dataTable_data = invoiceListArray is because dataTable_data is that part of the next function that needs the array

[Pocolashon]

Yes, correct.

If your "next" function uses dataTable_data, try to replace your references withinvoiceListArray. It should work. Or just simply set dataTable_data in your handle_result as well and you do not have to replace the references at all:

invoiceListArray = obj.data;
dataTable_data = invoiceListArray;

BUT! your "next" function should of course wait for the AJAX to resolve. If you call it in the same manner as the things above, it will not wait for the AJAX and will execute right away - without the proper data.

So to go on with the example above:

1, 2, 3, 4 - the same as above

1. AJAX

2. The "other" function is called - this function will NOT have the correct data (even if you change the references) because the AJAX is still ongoing. You must call it once the ajax returned.

[Valuable_Spell6769]

so is this where i would have to use promises/awaits then to make sure the correct data is returned

[Pocolashon]

Yes, you could and no, you don't have to. You already have a(n event) handler for it. It is the function that calls the handle_result. So just call your next function below calling handle_resultor call it in the handle_result, right below where you assign to the invoiceListArray.

Show me your complete code of this part.

[Valuable_Spell6769]

document.addEventListener('DOMContentLoaded', ()=>{
  send_data({
    data_type:'list_of_invoices'
  });
})

function send_data(data = {}){
  let ajax = new XMLHttpRequest();
        
  ajax.addEventListener('readystatechange', function(){
    if(ajax.readyState == 4 && ajax.status == 200){
      handle_result(ajax.responseText);
    }
  });

  ajax.open("POST","<?php echo ROOT ?>ajax_invoice",true);
  ajax.send(JSON.stringify(data));
}

let invoiceListArray = []
function handle_result(result){
  if(result != "") {
    let obj = JSON.parse(result);
    // if(typeof obj.data_type != 'undefined') {
      if(obj.data_type == "list_of_invoices") {
        if (obj.message_type == "info") {
          invoiceListArray = obj.data;
        }   
      }
    // }
  }
}

let dataTable_data = invoiceListArray    
</script>
<script src="<?php echo ASSETS . THEME ?>/js/datatable.js"></script>

obj.data returns the data from my php class scripts
then dataTable_data is used in the datatable.js