JavaScript map Function with JSON

Claudio Ctin3 months ago5 mins

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>

*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);
});

*You Output will Appear *

Please follow and like us: