Map an array of objects in react

Question

I have an array of objects with the following format. How can I map this array so that I can have an HTML article for each object, and a p 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
    }
]

Ebraim Carvalho · Accepted Answer · 2021-04-02 17:38:42Z

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

answered Apr 2, 2021 at 17:38

Ebraim Carvalho

1161 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zunayed Shahriar · Accepted Answer · 2021-04-02 17:25:51Z

Source:

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

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

Result:

Collectives™ on Stack Overflow

Map an array of objects in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related