Add Event Listener to Array index

Question

I have an array that is being filled on page load by D3. I want to access that same array at another time but I still need to confirm that it has been loaded.

I don't know the propper way to do this so I just guessed a few time and I kept getting "not a function" errors

First Code (populate my svg, snapshot of current values)

d3.tsv("file.txt").then( function(data) { Loaded_Data[1]=data; document.getElementById("valve1").innerHTML = data[data.length-1]['OnOff']; //etc 
 });

much later, but still in a relevant timescale of async, I want to do some d3 graphing with this data, but I want to make sure that there is data in my array.

Later Code (populate graphs, weeks of data)

Loaded_Data[1].addEventListener('load', () => {console.log("success"); //d3.graphing; });

I basically want a: while (array[1] is undefined){ Listen; } when done => graph;

Or would it just be easier to load the entire set of documents again in another d3.tsv().then()? it seems like a waste of resources to reload the entire data. What makes this difficult is the number of sources I have to load in, and consolidating my data into one array will be (hopefully) more convenient.

Answer 1

just graph in the then call after you read the data:

  d3.tsv("file.txt")
    .then(data => graph(data)); //data is available to be used at this point

also, if I'm reading this correctly, you are listening for the array to be populated with the load event, but that is only fired when the whole page is loaded and isn't relevant to the populating of a data structure. If you need the data stored somewhere in addition to graphing, you could modify the above to:

  d3.tsv("file.txt")
    .then(data => {
      graph(data);
      myArray = data;
    });