迭代对象的对象答案

【问题标题】：iterate over Object of Objects迭代对象的对象
【发布时间】：2018-01-03 02:36:47
【问题描述】：

您好，我正在尝试遍历从数据库中获取的一些数据，它是对象中的一个对象

this.state.data: {
  someGuy:{  
    cardHeading:"someHeading"
    email:"somemail@gmx.de"
    begin:"13-02-2018"
    end:"15-02-2018"
    message:"some Message"
    days: "2 Tage"
    turnover: 123
    url:"someUrl"
  },
  secondGuy: {
    cardHeading:"secondHeading"
    email:"second@gmx.de"
    begin:"13-03-2018"
    end:"15-04-2018"
    message:"second Message"
    days: "many days"
    turnover: 321
    url:"someUrl"
  }
}

现在我正在尝试将此数据映射到 react-bootstrap 媒体组件中

{ this.state.data.map((d) => {
    return(
      <Media>
        <Media.Left align="top">
          <img width={64} height={64} src={d.url} alt="placeholder thumbnail"  />
        </Media.Left>
        <Media.Body>
          <Media.Heading>{d.cardHeading}</Media.Heading>
          <p>{d.begin}</p>
          <p>{d.end}</p>
          <p>{d.days}</p>
          <p>{d.turnover}</p>
          <p>{d.email}</p>
          <p>{d.message}</p>
        </Media.Body>
      </Media>
    )
  })
}

我知道我可以用 map 遍历一个数组。我如何在对象中做到这一点？先感谢您。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用Object.keys，您将获得一个对象键数组，在这种情况下将是["someGuy", "secondGuy"]，现在您可以迭代它们并获取父对象的所有对象。

你可以这样做：

render () {
  const { data } = this.state
  const keys = Object.keys(data)
  return keys.map((key) => {
    const d = data[key]
    return (
      <Media>
        <Media.Left align="top">
          <img width={64} height={64} src={d.url} alt="placeholder thumbnail" />
        </Media.Left>
        <Media.Body>
          <Media.Heading>{d.cardHeading}</Media.Heading>
          <p>{d.begin}</p>
          <p>{d.end}</p>
          <p>{d.days}</p>
          <p>{d.turnover}</p>
          <p>{d.email}</p>
          <p>{d.message}</p>
        </Media.Body>
      </Media>

    )
  })
}

【讨论】：

【解决方案2】：

你可以试试 Object.getOwnPropertyNames()。它将对象的所有键的名称作为数组返回，然后您可以使用 object[] 来获取值。

【讨论】：