Динамическое добавление элементов Dat.gui из массива объектов

Question

Я пытаюсь расширить меню dat.gui для поддержки нескольких наборов данных по мере их добавления пользователем.

Цель состоит в том, чтобы восстановить gui при загрузке нового набора данных. Поэтому в приведенном ниже фрагменте он должен добавить новый слайдер для каждого объекта в данных массива.

function buildGui() { 
    var gui_data = [] 
    gui = new dat.GUI(); 

    // data is an array of objects 
    for (var i = 0; i < data.length; i++) { 
     // create gui folder for each dataset with name var1 
     gui_data.push(gui.addFolder(data[i].var1)) 

     // add a slider linked to data[i].var2 <- already set as an integer 
     gui_data[i].frameno = gui_data[i].add(this,data[i].var2).name('var2'); 

    } 
} 

Последняя строка вызывает ошибку:

TypeError: Cannot read property '0' of undefined 

Я знаю, что this неправильный объект, чтобы пройти, но не могу понять, что я делаю неправильно.

Answer 1

Так, в приведенном выше data[i].var2 не существует - я пытался ссылаться на переменную без ее создания. Учитывая, что данные [i] .frameNo существуют, версия ниже работает.

function buildGui() { 
    var gui_data = [] 
    gui = new dat.GUI(); 

    // data is an array of objects 
    data.forEach(function(each,i) { 
     // create gui folder for each dataset with name var1 
     gui_data.push(gui.addFolder(data[i].var1)) 

     // add a slider linked to data[i].var2 <- already set as an integer 
     gui_data[i].frameno = gui_data[i].add(each,'frameNo').name('var2'); 

    } 
}