如何使用map函数使用javascript在html元素中呈现对象数组？纯Javascript

Question

如何使用map函数使用javascript在html元素中呈现对象数组？纯Javascript

如何使用 javascript 使用 map 函数（不带 React）在 HTML 元素中呈现对象数组。

因此，当在用户详细信息中插入对象时，它应该动态地为用户创建一张卡片。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

ic3*_*3rg 8

使用map来创建 DOM 并附加到test1元素：

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('')

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，11 月前
查看次数：	4587 次
最近记录：	6 年，11 月前