Home  >  Article  >  Web Front-end  >  JavaScript map() method

JavaScript map() method

PHPz
PHPzOriginal
2024-07-22 06:32:49410browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn