循环通过对象 - 反应和火力

Question

我是新手，所以请耐心等待。

我从Firebase收到一个对象，结构如下：

{
  "news" : {
    "BBC news" : {
      "id" : 1,
      "title" : "BBC News"
    },
    "CNN News" : {
      "id" : 2,
      "title" : "CNN News"
    },
    "title" : "News"
  },
  "animals" : {
    "Horse" : {
      "id" : 3,
      "title" : "Horse"
    },
    "title" : "Animals"
  }
}

我正在使用react并想要遍历这些数据并像这样渲染：

News
- BBC News
- CNN News

Animals
- Horse

我已经设法使用以下代码遍历主要标题：

Object.values(this.state.datas).map((data, i) => <li key={i}> {data.title} </li>

JSON对象被分配给状态'datas'。预览目前呈现的内容：

News
Animals

我有父母的头衔，但不知道如何获得孩子的头衔。

有谁知道我如何得到我想要的结果？谢谢，抱歉如果我使用了错误的关键字。

Answer 1

假设您无法操纵数据结构，请尝试使用您的数据执行以下操作：

Object.values(this.state.datas).map((data, i) => {

  // obtain the categories, i.e. bbc, cnn from the entry
  let categories = Object.keys(data);

  // pop the "title" key so it doesn't get returned
  categories.pop();

  return (
      <li>
        {data.title}
        <ul>
            {categories.map((category, i) => <li key={i}>{category}</li>)}
        </ul>
     </li>
  );
});

这应该可以正常工作而无需从Firebase更改您的数据结构。让我知道这个是否奏效！在这个stackblitz链接上查看：https://stackblitz.com/edit/react-szbop7。