JavaScript map Function with JSON
Tags: webdev, javascript, beginners, programming
Published: 2024-07-07 16:46:24

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

```
**You Output will Appear **

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4av18r3lgh9zmd2fxhw3.png)