CODEWITHSUNDEEP
javascript
learner62
learner62

Reputation: 610

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

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.

Output

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>

Upvotes: 0

Views: 18920

Answers (1)

ic3b3rg
ic3b3rg

Reputation: 14927

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>

Upvotes: 11

Related Questions