Problem getting access to an array variable in a javascript

Question

Hi I have the following script

The page can also be seen in action here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<!-- Version: 1.0.0 -->
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
 </head>
   <body onLoad="myFunction()">


            <a href="javascript:printing()">Show All Coverafdedge</a>
            Show: </div>        

    <p><span id="x">0</span>, <span id="y">0</span></p>


      <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>



<script type="text/javascript">

var datasets = [];

var xmlhttp;
function loadXMLDoc(url,cfunc){
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}


function myFunction(){

    loadXMLDoc("parsers.json",handleXML);
}
var checkState = function(xmlhttp, callback) {
//document.write(xmlhttp.readyState);
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    callback();
  } else {
    // Check back again 1 sec later
    setTimeout(checkState, 1000);
  }
};

function handleXML() {
checkState(xmlhttp, function() {

    var txt=xmlhttp.responseText;
    datasets = [];
    var datasetsCounter =0;
    var secondPos = 0;
    var aPosition = 0;
    var currentCharacterLocation =0;
    var textLeft =txt;
do
  { 
    aPosition = textLeft.indexOf("#");
    secondPos = textLeft.indexOf(";");
    evaluedText = textLeft.substring(aPosition+1,secondPos);
    datasets[currentCharacterLocation] = eval("(" + evaluedText + ")");
    currentCharacterLocation++;
    textLeft = textLeft.substring(secondPos + 1);
  }
while (textLeft.indexOf("#") > -1);


 }); 
} 


function printing(){
for(var g =0; g < datasets.length; g++ ){
document.write(datasets[g].cover.data + "__");
}
}

$(function () {
    var d1 = [];
    var d2 = datasets[0].cover.data;
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

</script>       
</body>     
</html>

Now to my problem that I have with the variable "datasets", if I for example try to print out "datasets[0].cover.data" (Like I do in my function printing(), I can do that (Try yourself clicking on the link on that page). But when I try to use the variable inside the

"var d2 = datasets[0].cover.data", I get the error that its datasets[0].cover.data is not defined :S

Anyone know what I am doing wrong here? =)

Thanks

score 0 · Answer 1 · answered Jun 23 '11 at 16:35

Your function is running on document ready, but before the datasets variable is populated.

Move the code to the end of the callback function:

do
{ 
...
}
while (textLeft.indexOf("#") > -1);

var d1 = [];
var d2 = datasets[0].cover.data;
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

$.plot($("#placeholder"), [ d1, d2, d3 ]);
 }); 
}

score 0 · Answer 2 · answered Jun 23 '11 at 16:35

0

You haven't initialised the array at the time you call "var d2 = datasets[0].cover.data".

answered Jun 23 '11 at 16:35

Ollie Edwards

14,042
7
28
36

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Well, there is nothing in datasets at that point, so there is no datasets[0], so of course there can be no datasets[0].cover.data!

Ask yourself: How is datasets supposed to be populated, and where and when is that to occur?

It gets populated in handleXML but that only happens after the var d2 line.

Also, using eval is generally frowned upon, see this stackoverflow question for details.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 23 '11 at 16:36

Simon Sarris

62,212
13
141
171

score 0 · Accepted Answer · answered Jun 23 '11 at 16:40

Your issue is that the function in $(function() { ... }); is running when your body onload is called. You need to do something like

$(function () {
    loadXMLDoc("parsers.json", function () {
        handleXML(); // possibly add a callback to this function which calls the remaining code in this function

        var d1 = [];
        var d2 = datasets[0].cover.data;
        // a null signifies separate line segments
        var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

        $.plot($("#placeholder"), [d1, d2, d3]);
    });
});

And then remove the call from body onload

Problem getting access to an array variable in a javascript

4 Answers4