javascript - 从对象数组中动态添加 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不存在 - 我试图在没有创建它的情况下引用变量。鉴于 data[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');

  }
}