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=".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 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./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 Commented Dec 29, 2018 at 6:25
1 Answer
Reset to default 11Use 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./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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743625008a4480392.html
评论列表（0条）