遍历对象的对象

Question

你好，我正在尝试迭代我从我的数据库中获得的一些数据，它是一个对象的对象

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 Media组件中映射这个数据

{ 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遍历一个数组。我如何在对象中做到这一点？提前谢谢你。

Answer 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>

    )
  })
}

Answer 2

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