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

Question

我有存储在变量中的对象val.Main.widgets。我还有用作数据树的变量。我需要的是生成与我的对象中存储的键一样多的子元素val.Main.widgets。如果我控制台记录 this: 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,
      },
    ],
  },
];

谢谢你的任何建议。

标签： javascriptreactjsloopschildren

Answer 1

为此，您不需要lodash。您想Array.map在Object.keys.

const content = val.Main.widgets;
const keys = Object.keys(content);
const children = keys.map(key => content[key]);

然后在你的tileTree你只需设置children为children.

const tileTree = [
  {
    name: val.Main.name,
    children,
  },
];

这将为您提供val.Main.widgets对象的所有属性。如果你只想要特定的，你可以在你的地图函数中解构它们。

...
// Suppose we only want 'name'.
const children = keys.map(key => {
  const { name } = content[key];
  return { name };
});
...