时间戳

首页 > 解决方案 > 在反应中映射一组对象

javascript - 在反应中映射一组对象

问题描述

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

[
    {
        "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
    }
]

标签： javascriptarraysreactjsjavascript-objectsarray.prototype.map

解决方案

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>
  );
}

推荐阅读