Javascript "Cannot read property length from undefined" bug

Question

I have one problem with javascript global variable,namely,i have global variable niz_opcija2,and i initialize it in one function,but in other function,it says it is undefined.. this is my javascript:

  var niz_opcija2=[];
    window.onload=function(){

        ucitaj2();  
        ucitajKategorije();

    }

    function ucitaj2(){
        $.get("/manager/categoriesArticle",function(data){
            niz_opcija2.push(data);
            console.log(data);
            var select=document.getElementById("select3");
            for(var i=0;i<niz_opcija2[0].length;i++){
                var option=document.createElement("option");
                option.value=niz_opcija2[0][i].categoryCode;
                option.innerHTML=niz_opcija2[0][i].name;
                option.id=niz_opcija2[0][i].name;
                select.appendChild(option);
            }
        });
    }

    function ucitajKategorije(){

    for(var i=0;i<niz_opcija2[0].length;i++){
            var select=document.getElementById("selectKateg");
            var option=document.createElement("option");
            option.value=niz_opcija2[0][i].name;
            option.innerHTML=niz_opcija2[0][i].name;
            option.id=select.length;
            select.appendChild(option);
        }
    }

(in this code i am trying to get data as json using $.get,and add it to select lists select3 and selectKateg,and ucitaj2() function is getting the data,but ucitajKategorije isn't,but I think it should work the same?)Does anyone know what can be the problem?Thanks in advance!

Most likely the fact that you are assigning values to your variable asynchronously, while you do that your other function is running and your variable still has no data in it. — Lixus, Jun 01 '17 at 17:45
`$.get` is asynchronous, which means it won't have finished getting the data and populating the list by the time your second method gets called. I suggest looking into either Promises or callbacks — Hamms, Jun 01 '17 at 17:46
Remove `[0]` from the `.length` validation. It's giving you this error because it has nothing stored in _position 0_. — apires, Jun 01 '17 at 17:47
@doutriforce no it's not. He's accessing the variable prior to the async `get`'s success function returning. — Don Rhummy, Jun 01 '17 at 17:49
@doutriforce Indeed the problem *is* that nothing is stored in position `0`, but that's only because `niz_opcija2.push(data)` inside the asynchronous `$.get` callback has not run yet. If the OP corrects the timing so that the `push` runs prior to `niz_opcija2[0].length` then the issue will be fixed. — apsillers, Jun 01 '17 at 17:50
@apsillers, maybe he also should validate by position then? Or there is no problem at all about this? — apires, Jun 01 '17 at 17:51
@doutriforce Assuming that the `data` being fetched from the server is an array (or at least has a `length` property), I don't see anything wrong with doing `...[0].length` in the loop condition. The issue is simply that that loop condition is testing chronologically-before the variable is correctly set up. — apsillers, Jun 01 '17 at 17:54

score 0 · Accepted Answer · answered Jun 01 '17 at 17:47

The issue is happening because your intialization of niz_opcija2 happens inside an asynchronous function call.

ucitaj2 returns immediately before $.get("/manager/categoriesArticle" has returned with data form the server.

Change to calling it in the get succes function:

var niz_opcija2=[];
window.onload=function(){

    ucitaj2();  

}

function ucitaj2(){
    $.get("/manager/categoriesArticle",function(data){
        niz_opcija2.push(data);
        console.log(data);
        var select=document.getElementById("select3");
        for(var i=0;i<niz_opcija2[0].length;i++){
            var option=document.createElement("option");
            option.value=niz_opcija2[0][i].categoryCode;
            option.innerHTML=niz_opcija2[0][i].name;
            option.id=niz_opcija2[0][i].name;
            select.appendChild(option);
        }

        //Call it here
        ucitajKategorije();
    });
}

Javascript "Cannot read property length from undefined" bug

1 Answers1