#content

How to Transform Data in JavaScript with the map() Method

Introduction

Lists are a common feature in almost every app, and JavaScript provides a powerful tool for transforming them: the map() method. This method allows you to iterate over each element in a list and apply a transformation to it, returning a new list with the transformed elements.

Example

Imagine that a restaurant called Little Lemon would like to display a list of its popular desserts. Each dessert has the following properties: id, title, image, description, and price. Little Lemon would like to show a very simple list of desserts with a property called content, which is a combination of the title and description and the price of the delicious dish.

To do this, Little Lemon can use the map() method to transform the original list of desserts into a new list with a content property. The following code shows how to do this:

JavaScript

const data = [
  {
    id: 1,
    title: 'Chocolate Lava Cake',
    image: 'https://example.com/chocolate-lava-cake.jpg',
    description: 'A rich and decadent chocolate cake with a molten chocolate center.',
    price: 10.99,
  },
  {
    id: 2,
    title: 'Tiramisu',
    image: 'https://example.com/tiramisu.jpg',
    description:
      'A classic Italian dessert made with ladyfingers dipped in espresso and layered with a creamy mascarpone filling.',
    price: 8.99,
  },
  {
    id: 3,
    title: 'Apple Pie',
    image: 'https://example.com/apple-pie.jpg',
    description: 'A classic American dessert made with a flaky crust and sweet, juicy apples.',
    price: 7.99,
  },
];
 
const topDesserts = data.map((dessert) => {
  return {
    content: `${dessert.title} - ${dessert.description} (${dessert.price})`,
    price: dessert.price,
  };
});
 
console.log(topDesserts);

Use o código com cuidado. Saiba mais (opens in a new tab)

Conclusion

The map() method is a powerful tool for transforming data in JavaScript. It allows you to iterate over each element in a list and apply a transformation to it, returning a new list with the transformed elements. This can be useful for a variety of tasks, such as filtering, sorting, and transforming data to a different format.