Home > Article > Web Front-end > 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.
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // Output: [2, 4, 6, 8, 10]
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!