在反应中映射一组对象

Question

我有一组具有以下格式的对象。我如何映射这个数组，以便每个对象都有一个 HTML 文章，以及一个显示每个对象的数据、来源、目的地、价格和可用性的 p 标签？

[
    {
        "data": "2020-11-15",
        "origin": "COR",
        "destination": "MDZ",
        "price": 474.05,
        "availability": 9
    },
    {
        "data": "2020-11-15",
        "origin": "COR",
        "destination": "BRC",
        "price": 197.68,
        "availability": 2
    },
    {
        "data": "2020-11-15",
        "origin": "EPA",
        "destination": "BRC",
        "price": 300.3,
        "availability": 1
    },
    {
        "data": "2020-11-20",
        "origin": "COR",
        "destination": "MDZ",
        "price": 373.19,
        "availability": 6
    }
]

Answer 1

来源：

export default function App() {
  var objects = [
    {
      data: "2020-11-15",
      origin: "COR",
      destination: "MDZ",
      price: 474.05,
      availability: 9
    },
    {
      data: "2020-11-15",
      origin: "COR",
      destination: "BRC",
      price: 197.68,
      availability: 2
    },
    {
      data: "2020-11-15",
      origin: "EPA",
      destination: "BRC",
      price: 300.3,
      availability: 1
    },
    {
      data: "2020-11-20",
      origin: "COR",
      destination: "MDZ",
      price: 373.19,
      availability: 6
    }
  ];
  var properties = Object.keys(objects[0]);

  return objects.map((obj) => (
    <article>
      {properties.map((property) => (
        <p>
          {property}: {obj[property]}
        </p>
      ))}
      <br />
    </article>
  ));
}

演示： https://codesandbox.io/s/quizzical-hooks-lzyhv?file=/src/App.js:24-831

结果：

Answer 2

export default function App() {
  const data = [{ "data": "2020-11-15", "origin": "COR", "destination": "MDZ", "price": 474.05, "availability": 9 }, { "data": "2020-11-15", "origin": "COR", "destination": "BRC", "price": 197.68, "availability": 2 }, { "data": "2020-11-15", "origin": "EPA", "destination": "BRC", "price": 300.3, "availability": 1 }, { "data": "2020-11-20", "origin": "COR", "destination": "MDZ", "price": 373.19, "availability": 6 }]
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {data.map(item => (
        <p>Data: {item.data} - Origin: {item.origin} - Destination: {item.destination} - Price: $ {item.price} - Availability:  {item.availability}</p>
      ))}
    </div>
  );
}

在反应中映射一组对象

Map an array of objects in react

javascript

arrays

reactjs

javascript-objects

array.prototype.map