javascript - 迭代对象的对象

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媒体组件中映射此数据

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

    )
  })
}