Javascript 在JSX中循环对象

在JSX文件中，我需要遍历对象的两个级别，以呈现每个内部数组存储的信息。它看起来像：

Object>Object>Array

我的数据结构如下：

const数据={
第一组：{
子群1:[{…}，{…}，{…}]，
...
},
...
}

所以我试图完成这样的事情：

return (
  <ul>
    for (group in data) {
      <li>Group Name
        <ul>
          for(subgroup in group) {
            <li>Subgroup Name
              <ul>
                subgroup.map()
              </ul>
            </li>
          }
        </ul>
      </li>
    }
  </ul>
)

返回(

用于（数据中的组）{
组名

对于（组中的子组）{
子组名称

subgroup.map（）


}


}

)

---

我知道JSX文件中不允许for循环，但将我的对象转换为多个数组似乎也不正确，因为我不知道API中可能会有多少项。

我使用Herohtar建议解决了这个问题，以数组格式提取每个父对象的键/值：

{
  Object.entries(data).map(group => (
      <ul key={group[0]}>
        <li>{group[0]}
          <ul>
            {
              Object.entries(group[1]).map(subgroup => (
                  <ul key={subgroup[0]}>
                    <li>{subgroup[0]}
                      <ul>
                        {
                          subgroup[1].map(item => (
                              <li key={item.code}>{item.name}</li>
                            )
                          )
                        }
                      </ul>
                    </li>
                  </ul>
                )
              )
            }
          </ul>
        </li>
      </ul>
    )
  )
}

{
Object.entries（data.map）（组=>(

{组[0]}

{
Object.entries（组[1]）.map（子组=>(

{子群[0]}

{
子组[1]。映射（项=>(
{item.name}
)
)
}



)
)
}



)
)
}

---

我希望有一种更优雅的方法来实现这一点。

我使用Herohtar建议解决了这个问题，以数组格式提取每个父对象的键/值：

{
  Object.entries(data).map(group => (
      <ul key={group[0]}>
        <li>{group[0]}
          <ul>
            {
              Object.entries(group[1]).map(subgroup => (
                  <ul key={subgroup[0]}>
                    <li>{subgroup[0]}
                      <ul>
                        {
                          subgroup[1].map(item => (
                              <li key={item.code}>{item.name}</li>
                            )
                          )
                        }
                      </ul>
                    </li>
                  </ul>
                )
              )
            }
          </ul>
        </li>
      </ul>
    )
  )
}

{
Object.entries（data.map）（组=>(

{组[0]}

{
Object.entries（组[1]）.map（子组=>(

{子群[0]}

{
子组[1]。映射（项=>(
{item.name}
)
)
}



)
)
}



)
)
}

---

我希望有一种更优雅的方式来做这件事。

子类1:{[…]，[…]}不是意味着一个对象数组

[{…}，{…}]

或数组数组

[…]，[…]

？

{[…]}

语法无效。您可以使用类似于

Object.entries（data.map（）

的方法来迭代数据中的每个键/值对，然后对子组进行同样的操作，等等……杰克，我已经修复了语法。谢谢你的提醒！有了上面提到的Object.entries，你就应该可以很好地去了。另一方面，考虑到这是多么嵌套，在一堆无序列表上使用一个表不是更有意义吗？

subgro1:{[…]，[…]}

不是意味着一个对象数组

[{…}，{…}]

或数组数组

[…]，[…]

？

{[…]}

语法无效。您可以使用类似于

Object.entries（data.map（）

的方法来迭代数据中的每个键/值对，然后对子组进行同样的操作，等等……杰克，我已经修复了语法。谢谢你的提醒！有了上面提到的Object.entries，你就应该可以很好地去了。另一方面，考虑到这是多么嵌套，在一堆无序列表上使用一个表不是更有意义吗？