how to render array of object in html element using javascript using map function ? Pure Javascript

Question

how to render an array of object in HTML element using javascript using map function (without React).

So, that when insert an object in user detail it should create a card for the user dynamically.

var Usrdata = document.querySelector('.box');

var userDetail = [
    {name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
    {name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
    {name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
    {name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]

userDetail.map(user=>{
    console.log (
        user.name,
        user.age,
        user.place,
        user.country,
        user.avatar
    )
})

*{
    margin: 0;
    padding: 0;
}
.box{
    margin: 10px;
    height: 250px;
    background-color: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div class="customCard">
        <div class="row">
            <div id="test1" class="col-sm-4 box">
                
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

"how to...." isn't an acceptable question here in most instances. See How to Ask. — Claies
– Claies, Commented Dec 29, 2018 at 6:25

ic3b3rg · Accepted Answer · 2018-12-29 06:34:37Z

Use the map to create DOM and attach to the test1 element:

var Usrdata = document.querySelector('.box');

var userDetail = [
    {name:"sunil",age:"24",place:"delhi",avatar:"./image/abc.jpg",country:"India"},
    {name:"sujan",age:"22",place:"assam,",avatar:"./image/abc.jpg",country:"India"},
    {name:"abishek",age:"26",place:"kolkata",avatar:"./image/abc.jpg",country:"India"},
    {name:"chiranjeev",age:"20",place:"bangalore",avatar:"./image/abc.jpg",country:"India"},
]

document.getElementById('test1').innerHTML = userDetail.map(user => 
    `<div>
      <div>Name: ${user.name}</div>
      <div>Age: ${user.age}</div>
      <div>Place: ${user.place}</div>
      <div>Country: ${user.country}</div>
      <div>Avatar: ${user.avatar}</div>
    </div>`
).join('')

*{
    margin: 0;
    padding: 0;
}
.box{
    margin: 10px;
    height: 250px;
    background-color: #fff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testing</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div class="customCard">
        <div class="row">
            <div id="test1" class="col-sm-4 box">
                
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Naeem Akhtar · Accepted Answer · 2025-06-06 11:43:11Z

Just converting the @ic3b3rg code into the tabular format.

var Usrdata = document.querySelector('.box');

var userDetail = [{
    name: "sunil",
    age: "24",
    place: "delhi",
    avatar: "./image/abc.jpg",
    country: "India"
  },
  {
    name: "sujan",
    age: "22",
    place: "assam,",
    avatar: "./image/abc.jpg",
    country: "India"
  },
  {
    name: "abishek",
    age: "26",
    place: "kolkata",
    avatar: "./image/abc.jpg",
    country: "India"
  },
  {
    name: "chiranjeev",
    age: "20",
    place: "bangalore",
    avatar: "./image/abc.jpg",
    country: "India"
  },
]

document.getElementById('test1').innerHTML = userDetail.map(user =>
  `<tr>
      <td>${user.name}</td>
      <td>${user.age}</td>
      <td>${user.place}</td>
      <td>${user.country}</td>
      <td><img src='${user.avatar}' height='50' /></td>
    </tr>`
).join('')

* {
  margin: 0;
  padding: 0;
}

.box {
  margin: 10px;
  height: 250px;
  background-color: #fff;
}

table {
  padding: 0;
  margin: 50px;
  border-collapse: collapse;
  border: 1px solid #EEE;
}

table tr th { padding: 5px; background: #333; color: #FFF; }

table tr td { padding: 5px; }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<div class="customCard">
  <div class="row">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Place</th>
          <th>Country</th>
          <th>Avatar</th>
        </tr>
      </thead>
      <tbody id="test1">
        
      </tbody>
    </table>
  </div>
</div>

Lajos Arpad · Accepted Answer · 2025-06-07 15:53:20Z

In Javascript you can use template literals. The syntax is:

`<your template here>`

and you can embed a variable like

${yourVariable}

so, to provide a very simple example:

for (let element of document.querySelectorAll("#title, #content")) {
    element.addEventListener("input", function() {
        let container = document.getElementById("container");
        container.innerHTML = `
            <h1>${document.getElementById("title").value}</h1>
            <p>${document.getElementById("content").value}</p>
        `;
    });
}

Title: <input type="text" id="title">
Content: <textarea id="content"></textarea>
<div id="container">
</div>

So, in order to render your content, you will need a function like

function getUserTemplate(user) {
    return `
        <your user template here>
    `;
}

(I'm not writing the template for you, as here's the point where you can get creative and you do not need to rely on any ad-hoc HTML I would define here), and then you can:

function getUserTemplates(users) {
    let output = [];
    for (let user of users) output.push(getUserTemplate(user));
    return output;
}

and then you can render it anywhere you want via:

function renderUserTemplates(element, users) {
    element.innerHTML = getUserTemplates(users).join("");
}

With all that in mind, you can apply map like this:

element.innerHTML = users.map(user => getUserTemplate(user)).join("");

Collectives™ on Stack Overflow

how to render array of object in html element using javascript using map function ? Pure Javascript

So, that when insert an object in user detail it should create a card for the user dynamically.

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

So, that when insert an object in user detail it should create a card for the user dynamically.

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related