Méthode JavaScript map()

La méthode map() crée un nouveau tableau rempli avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

1. Voici un exemple simple de map() :

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

console.log(doubled);

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

1. Créer un fichier JSON avec les informations et l'affichage de la voiture à l'aide de map()

Tout d'abord, créez un fichier JSON nommé 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"
  }
]

créez un fichier HTML index.html et utilisez JavaScript pour récupérer et afficher les informations sur la voiture :

  <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>Méthode JavaScript map()
            <p>Model: ${car.model}
            <img src="${car.image}" alt="Méthode JavaScript map()">
          
        `).join('');
      })
      .catch(error => console.error('Error fetching the car data:', error));
  </script>

Assurez-vous de placer le fichier cars.json dans le même répertoire que votre fichier HTML ou ajustez l'URL de récupération en conséquence

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!