JS creating global variable in function and using it in another function

Question

I cannot create a global variable in a function

function getFabrics(){
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "af_general.php?action=fabrics", true);
    xhttp.send();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            fabrics_json=JSON.parse(this.responseText);
            console.log(fabrics_json);
        }
    };
}

and use it in another:

function addrow(){
    getFabrics();
    var table=document.getElementById('stoixeia');
    var rows = table.getElementsByTagName("tr").length;
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(-1);
    var rowno=rows-1;
    var pcs_ent=document.createElement('input');
    setAttributes(pcs_ent,{'type':'number','id':'pcs.'+rowno,'name':'pcs','style':'width: 4em;text-align:right','min':'0','max':'99','autocomplete':'off'});
    cell1.innerHTML='#'+rowno;
    cell1.appendChild(pcs_ent);
    var cell2 = row.insertCell(-1);
    var fabric_ent=document.createElement('select');
    console.log(fabrics_json);//returns undefined
    for (f in fabrics_json){
        option = document.createElement('option');
        option.value=fabrics_json[f][0];
        option.text=fabrics_json[f][1];
        fabric_ent.add(option);
    }
    //and goes on...
}

I have read all possible questions in stackoverflow but I can't find a way to get the results. fabrics_json remains undefined either if I declare it in the beginning of the script or not.

Possible duplicate of How do I return the response from an asynchronous call? — hindmost
– hindmost, Commented Nov 22, 2018 at 10:12

Maxim Egorushkin · Accepted Answer · 2018-11-22 10:21:27Z

1

Global variables in JavaScript are members of window object. Refer to your global variable as window.fabrics_json.

If both functions are in the same source file, you can declare var fabrics_json; at global scope and access it both with and without window. prefix.

edited Nov 22, 2018 at 10:21

answered Nov 22, 2018 at 10:16

Maxim Egorushkin

138k18 gold badges201 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hindmost Over a year ago

Actually the problem have no relation to global variables. It's a typical problem with async calls.

Maxim Egorushkin Over a year ago

@hindmost I disagree. You can do async in a different way, however, the question is about setting and getting a global variable.

Mukesh Verma Over a year ago

@hindmost This is no where related to async calls.

hindmost Over a year ago

@Maxim Egorushkin The quote from OP: fabrics_json remains undefined either if I declare it in the beginning _of the script or not.

hindmost Over a year ago

The actual problem is that the OP calls getFabrics in sync way and expects that AJAX response is available immediately after that call.

James · Accepted Answer · 2018-11-22 10:23:29Z

I wouldn't use a global variable here... There's no need. You just want a simple callback function.

//Pass in a callback function..
function getFabrics(callback){
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "af_general.php?action=fabrics", true);
    xhttp.send();
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            callback(JSON.parse(this.responseText));
        }
    };
}


function addrow(){
    // pass in your code to getFabrics as a function to be executed on the callback.
    getFabrics(function(fabrics_json){
        var table=document.getElementById('stoixeia');
        var rows = table.getElementsByTagName("tr").length;
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(-1);
        var rowno=rows-1;
        var pcs_ent=document.createElement('input');
        setAttributes(pcs_ent,{'type':'number','id':'pcs.'+rowno,'name':'pcs','style':'width: 4em;text-align:right','min':'0','max':'99','autocomplete':'off'});
        cell1.innerHTML='#'+rowno;
        cell1.appendChild(pcs_ent);
        var cell2 = row.insertCell(-1);
        var fabric_ent=document.createElement('select');
        console.log(fabrics_json);//returns undefined
        for (f in fabrics_json){
            option = document.createElement('option');
            option.value=fabrics_json[f][0];
            option.text=fabrics_json[f][1];
            fabric_ent.add(option);
        }
        //and goes on...
    });
}

Collectives™ on Stack Overflow

JS creating global variable in function and using it in another function

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related