Map 反应中的对象数组

Question

我有一个具有以下格式的对象数组。 How can I map this array so that I can have an HTML article for each object, and ap tag that shows the data, origin, destination, price and availability of each object?

[
    {
        "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() {
  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>
  );
}

Answer 2

资源：

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 3

//   You can use the built in function "map" for arrays

      var array = [{
        name:"said",
        age:12
}];
        array.map(row=>{
    return (
         <div>
            <p>{row.name}</p>
<p>{row.age}</p>
    </div>
    )
    });