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

Question

我的对象存储在变量 val.Main.widgets 中。我还有用作数据树的变量。我需要的是生成与存储在 val.Main.widgets 中的对象中的键一样多的子元素。如果我控制台记录这个：console.log(Object.keys(val.Main.widgets).length;，它 returns 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是一个函数，returns一个数组。该数组有一个 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]
    });
});

您可以将 8 替换为您的 .length 代码。

Answer 3

你不需要为此需要 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 对象的所有属性。如果你只想要特定的，你可以在你的地图函数中解构它们。

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

Answer 4

const tileTree = [
  {
    name: 'test',
    children: [
      {
        name: 'test1'
      },
      {
        name: 'test2'
      },
      {
        name: 'test3'
      },
            {
        name: 'test4'
      },
            {
        name: 'test5'
      },
            {
        name: 'test6'
      }
    ],
  },
];

    const createLi = (arr) => {
        for (let i = 0; i < arr[0].children.length; i += 1) {
        let li = document.createElement("li");
        let ol = document.getElementById('list');
        li.innerHTML = arr[0].children[i].name;
        ol.appendChild(li);
      }
    }

    createLi(tileTree);

https://jsfiddle.net/os20wdLh/

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

Generate Children element based on number of keys in object

javascript

children

loops

reactjs