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

标签 javascript reactjs loops children

我的对象存储在变量 val.Main.widgets 中。我还有用作数据树的变量。我需要的是生成与存储在 val.Main.widgets 中的对象中的键一样多的子元素。 。如果我控制台记录以下内容:console.log(Object.keys(val.Main.widgets).length; ,它返回 8,因此在本例中我需要生成 8 个子元素。

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

这是我的对象:

enter image description here

这是我的树变量:

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

感谢您的建议。

最佳答案

不需要为此需要lodash。您想要对 Object.keys 的结果使用 Array.map

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 对象的所有属性。如果您只想要特定的,您可以在 map 函数中解构它们。

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

关于javascript - 根据对象中键的数量生成子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58219390/

相关文章:

javascript - 使用 mapStateToProps 连接到 redux 存储的确认模式给出错误

javascript - 如何在 Meteor 的排行榜示例中更新按钮的文本?

javascript - 简单 react 错误 : Can't use @material-ui/picker library in Next. js

javascript - React setState 钩子(Hook)不适用于 useEffect

java - 检查节点是否已在图中的优雅方法

javascript - 在没有可用标识符的情况下将所有具有特定 textContent 的 <a> 元素作为目标

javascript - Cordova 应用程序正在为 Android 上的所有 XMLHttpRequests 获取 404

javascript - onSubmit 导致不必要的 url 更改

javascript - 如何在再次调用之前结束一个函数

javascript - ios:如何检测自定义 url 方案链接是否失败?