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>

Answer 1

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>

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

Question

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

1 answers

solution1
8 ACCPTED 2018-12-29 06:34:37

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

Question

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

1 answers

solution1 8 ACCPTED 2018-12-29 06:34:37

solution1
8 ACCPTED 2018-12-29 06:34:37