The map() method in JavaScript is used to create a new array populated with the results of calling a provided function on every element in the calling array. It's one of the most commonly used array methods due to its utility in transforming data in a functional programming style.
Creates a New Array: map() does not modify the original array. Instead,
it creates a new array with the transformed values.
Syntax
array.map(function(element, index, array) { // Return transformed element here }) *Example *
Displaying JSON Data in a Card Layout using HTML, CSS, and JavaScript
Let's display the given JSON data in a card layout on an HTML page using the map function in JavaScript. We will use HTML for the structure, CSS for styling, and JavaScript to fetch and display the data.
*HTML File *index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" ></script> <title>JSON Data Display</title> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> </head> <body> <div class="container"> <div class="row text-center mt-4 mb-2"> <h1>Data from JSON</h1> <p>Understanding the JavaScript map Function with JSON</p> </div> <div id="data-container"></div> </div> <script src="script.js"></script> </body> </html> *JavaScript File *script.js
const data = [ { id: 1, name: "Sudhanshu Gaikwad", age: 23, country: "India", }, { id: 2, name: "Jane Smith", age: 30, country: "India", }, { id: 3, name: "Michael Johnson", age: 35, country: "India", }, ]; document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("data-container"); const table = document.createElement("table"); const thead = document.createElement("thead"); const headerRow = document.createElement("tr"); const headers = ["ID", "Name", "Age", "Country"]; headers.map((headerText) => { const th = document.createElement("th"); th.textContent = headerText; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); const tbody = document.createElement("tbody"); // Heare We have used Map() Function For the all data Displayed data.map((item) => { const row = document.createElement("tr"); Object.values(item).map((value) => { const td = document.createElement("td"); td.textContent = value; row.appendChild(td); }); tbody.appendChild(row); }); table.appendChild(tbody); container.appendChild(table); }); Output
