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
Top comments (0)