javascript - Dynamically adding Dat.gui elements from array of objects -

i trying extend dat.gui menu support multiple datasets added user.

the aim rebuild gui when new dataset loaded. in snippet below, should add new slider each object in array data.

function buildgui() {   var gui_data = []   gui = new dat.gui();    // data array of objects   (var = 0; < data.length; i++) {       // create gui folder each dataset name var1       gui_data.push(gui.addfolder(data[i].var1))        // add slider linked data[i].var2 <- set integer       gui_data[i].frameno = gui_data[i].add(this,data[i].var2).name('var2');    } } 

the last line raises error:

typeerror: cannot read property '0' of undefined 

i know this wrong object pass, cannot figure out doing wrong.

so, in above data[i].var2 did not exist - trying reference variable without having created it. given data[i].frameno exists, version below works.

function buildgui() {   var gui_data = []   gui = new dat.gui();    // data array of objects   data.foreach(function(each,i) {       // create gui folder each dataset name var1       gui_data.push(gui.addfolder(data[i].var1))        // add slider linked data[i].var2 <- set integer       gui_data[i].frameno = gui_data[i].add(each,'frameno').name('var2');    } }