根据对象中键的数量生成子元素

Question

我的对象存储在变量val.Main.widgets中。我也有充当数据树的变量。我需要生成与存储在val.Main.widgets中的对象中的键一样多的子元素。如果我在控制台上输入以下内容：console.log(Object.keys(val.Main.widgets).length;，它将返回8，因此在这种情况下，我需要生成8个子元素。

我猜我需要某种循环，但是我真的不知道从哪里开始，因此我为什么要在这里问。

这是我的对象：

这是我的树变量：

const tileTree = [
  {
    name: val.Main.name,
    children: [
      {
        name: val.Main.widgets['E1EV7'].name,
      },
      {
        name: val.Main.widgets['E70ZT'].name,
      },
    ],
  },
];

谢谢您的任何建议。

Answer 1

您可以使用

Object.keys(val.Main.widgets).map(widgetKey => {
   const widget = val.Main.widgets[widgetKey]

   return (
       <div key={widgetKey}>
          <h1>This is widget : {widget.name}</h1>
       </div>
   )
}

Answer 2

Object.keys具有foreach方法。

var lunch = {
    sandwich: 'ham',
    snack: 'chips',
    drink: 'soda',
    desert: 'cookie',
    guests: 3,
    alcohol: false,
};

Object.keys(lunch).forEach(function (item) {
    console.log(item); // key
    console.log(lunch[item]); // value
});

其他方法是使用npm或yarn的lodash模块。示例，其中_是lodash模块：

_.times(8, i => {
    schedule.push({
        date: moment()
            .add(i, "days")
            .format("YYYY-MM-DD"),
        times: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
    });
});

您可以将.length替换为8。