JavaScript map() method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

1. Here's a simple map() example:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled);

// Output: [2, 4, 6, 8, 10]

1. Create a JSON File with Car Information and Display Using map()

First, create a JSON file named cars.json:

[
  {
    "name": "Toyota Camry",
    "model": "2023",
    "image": "https://example.com/toyota_camry.jpg"
  },
  {
    "name": "Honda Accord",
    "model": "2022",
    "image": "https://example.com/honda_accord.jpg"
  },
  {
    "name": "Tesla Model 3",
    "model": "2024",
    "image": "https://example.com/tesla_model_3.jpg"
  }
]

create an HTML file index.html and use JavaScript to fetch and display the car information:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Car Display</title>
  <style>
    .car {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 10px;
      text-align: center;
    }
    .car img {
      width: 100px;
      height: auto;
    }
  </style>


  <h1>Car Information</h1>
  <div id="car-container"></div>

  <script>
    // Here we have Fetch the car data
    fetch('cars.json')
      .then(response => response.json())
      .then(data => {
        const carContainer = document.getElementById('car-container');
        carContainer.innerHTML = data.map(car => `
          <div class="car">
            <h2>JavaScript map() method
            <p>Model: ${car.model}
            <img src="${car.image}" alt="JavaScript map() method">
          
        `).join('');
      })
      .catch(error => console.error('Error fetching the car data:', error));
  </script>

Make sure to place the cars.json file in the same directory as your HTML file or adjust the fetch URL accordingly

The above is the detailed content of JavaScript map() method. For more information, please follow other related articles on the PHP Chinese website!