Question

So just debugging someone else’s code, I’d fixed everything in Firefox and now onto Chrome but when I am trying to select an option which selects all child nodes and opens their relevant graphs, I am getting a weird error:

Uncaught TypeError: Cannot call method ‘substr’ of undefined

I know the problem is (apparantly) this line:

var graph={id:seqId,entityName:flags[6].substr(1).substr(0,flags[6].length-2),entity:flags[5].substr(1).substr(0,flags[5].length-2),idCounter:flags[4],counterName:flags[3].substr(1).substr(0,flags[3].length-2),ivmanager:flags[7].substr(1).substr(0,flags[7].length-2),chart:null,pointsToShowX:null,borneInf:null,unite:"",idInstance:flagsInstance[2].substr(1).substr(0,flagsInstance[2].length-2),instanceName:flagsInstance[3].substr(1).substr(0,flagsInstance[3].length-2),listPdsNull:new Array(), countInstance:idTreeview+"_"+i, countGraph:-1};

But I have no idea why this is causing an error as everything looks correct to me?! substr is used countless times before and after the function so I have no idea why Chrome is throwing this error at me.

The full function is as below. I believe the problem is in the second part.

function loadGraphs(idTreeview,idSelectGraph)
{

    var count=0;
    var fn=$('#'+idSelectGraph)[0].attributes[1].value;
    fn=fn.substr(12).substr(0,fn.length-2);
    var flags=fn.split(new RegExp(","));
    var data=''; 

    var idInstanceTreeview = idTreeview;

if($('#counterTreeviewUL'+idInstanceTreeview).length == 0)      
{

    var fnInstance=$('#'+idSelectGraph)[0].attributes[1].value;

    var flagsInstance=fnInstance.split(new RegExp(","));

    var graph = {
            id: seqId,
            entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
            entity: flags[5].substr(1).substr(0, flags[5].length - 2),
            idCounter: flags[4],
            counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
            ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
            chart: null,
            pointsToShowX: null,
            borneInf: null,
            unite: "",
            idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
            instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
            listPdsNull: new Array(),
            countInstance: idTreeview + "_" + i,
            countGraph: -1
        };

    seqId++;
    graphs[graphsLastId]=graph;
    graphsLastId++;

    }

else 
  {
    for(var i=0;i<$('#counterTreeviewUL'+idInstanceTreeview)[0].children.length;i++)
        ($('#counterTreeviewUL'+idInstanceTreeview)[0].children[i].children[0].checked)?++count:count;

    if ($('#counterTreeviewUL'+idInstanceTreeview)[0].children.length == count)
    {
        $('#'+idSelectGraph)[0].checked=true;
        $('#'+idSelectGraph)[0].indeterminate=false;
    }
    else if (count==0)
    {
        $('#'+idSelectGraph)[0].checked=true;       
        $('#'+idSelectGraph)[0].indeterminate=false;        
    }
    else
    {
        $('#'+idSelectGraph)[0].checked=true;
        $('#'+idSelectGraph)[0].indeterminate=false;
    }   
        for (var i=0;i<$('#counterTreeviewUL'+idTreeview)[0].children.length;i++)
    {   
        if (!$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked)
        {   
            $('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].checked=true;


       var fnInstance=$('#counterTreeviewUL'+idTreeview)[0].children[i].children[0].attributes[1].value;

       fnInstance=fnInstance.substr(15).substr(0,fnInstance.length-2);  
       var flagsInstance=fnInstance.split(new RegExp(","));


            var graph = {
                    id: seqId,
                    entityName: flags[6].substr(1).substr(0, flags[6].length - 2),
                    entity: flags[5].substr(1).substr(0, flags[5].length - 2),
                    idCounter: flags[4],
                    counterName: flags[3].substr(1).substr(0, flags[3].length - 2),
                    ivmanager: flags[7].substr(1).substr(0, flags[7].length - 2),
                    chart: null,
                    pointsToShowX: null,
                    borneInf: null,
                    unite: "",
                    idInstance: flagsInstance[2].substr(1).substr(0, flagsInstance[2].length - 2),
                    instanceName: flagsInstance[3].substr(1).substr(0, flagsInstance[3].length - 2),
                    listPdsNull: new Array(),
                    countInstance: idTreeview + "_" + i,
                    countGraph: -1
                };

            seqId++;            
            graphs[graphsLastId]=graph;             
            graphsLastId++;
        }
    }

 }
    graphsToLoad=false;
    updateAllGraphs();
    loading=false;

    if($('#counterTreeviewUL'+idInstanceTreeview).length == 0)
    {

      if($('#'+idSelectGraph)[0].checked)
        {
        countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);
        }
      else 
        {
        countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);
        }
    }

    else 
    {
    countSelectedGraphs(graphsLastId, flags[5].substr(1).substr(0,flags[5].length-2), 0);       
    }
}

Any insight into what’s causing this seemingly random error would be much appreciated as I can’t find much online regarding this error (the cases I’ve seen it occur are nothing like my one), thanks!

Answer 1

The line

fn=fn.substr(12).substr(0,fn.length-2);

starts with making a substring, effectively stripping the first 12 letters away from the string and leaving you with “5”. (The second substr does effectively nothing in this case)

Because fn is “5” when you assign flags then flags is also “5” which is a 1-character string and therefore flags[6] == undefined (or any index larger than 0). Just try these 3 lines in console:

var x = "5"; 
x[0]; // returns "5"
x[1]; // returns undefined