const data = JSON.parse('[{"_id":"5efadd9cc395d27a08327337","index":0,"guid":"7ef80488-dd43-4755-bc53-6ed5d4ba5718","isActive":false,"balance":"$3,810.20","picture":"http://placehold.it/32x32","age":34,"eyeColor":"blue","name":{"first":"Adrienne","last":"Gibson"},"company":"ACCEL","email":"[email protected]","phone":"+1 (982) 568-2652","address":"854 Bergen Avenue, Lindisfarne, California, 5694","about":"Cupidatat dolor duis sit cillum commodo adipisicing velit veniam. Id incididunt Lorem duis aliquip id sit in qui mollit laboris officia. Consequat consectetur consectetur ex commodo pariatur consectetur et id.","registered":"Thursday, June 21, 2018 5:42 PM","latitude":"28.120977","longitude":"-11.134193","tags":["labore","enim","dolore","amet","ipsum"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Jodi Gregory"},{"id":1,"name":"Dorothy Page"},{"id":2,"name":"Saundra Taylor"}],"greeting":"Hello, Adrienne! You have 8 unread messages.","favoriteFruit":"strawberry"},{"_id":"5efadd9cf1b438de98855f51","index":1,"guid":"41c62512-4f0b-4b15-a42e-7e7d49b9ec2a","isActive":false,"balance":"$1,696.80","picture":"http://placehold.it/32x32","age":25,"eyeColor":"brown","name":{"first":"Catalina","last":"Evans"},"company":"QIMONK","email":"[email protected]","phone":"+1 (940) 468-3253","address":"226 Centre Street, Wolcott, Arkansas, 6780","about":"Aliqua elit incididunt aliqua elit elit proident exercitation tempor reprehenderit magna nisi consequat Lorem elit. Est et deserunt eiusmod ipsum aliqua ea consectetur voluptate. Occaecat incididunt voluptate in adipisicing.","registered":"Monday, October 7, 2019 9:54 PM","latitude":"88.749021","longitude":"171.865187","tags":["et","eu","dolore","ea","officia"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Leblanc Ferrell"},{"id":1,"name":"Horn Preston"},{"id":2,"name":"Cantrell Woods"}],"greeting":"Hello, Catalina! You have 7 unread messages.","favoriteFruit":"apple"},{"_id":"5efadd9c377892fc02482978","index":2,"guid":"04ead300-d466-494c-8f3b-2c806b61010f","isActive":false,"balance":"$3,422.26","picture":"http://placehold.it/32x32","age":37,"eyeColor":"green","name":{"first":"Oconnor","last":"Briggs"},"company":"ZOID","email":"[email protected]","phone":"+1 (944) 592-3342","address":"456 Ainslie Street, Clarksburg, Guam, 6111","about":"Consectetur culpa deserunt quis minim nulla velit enim sit culpa. Sit aute culpa nostrud duis voluptate culpa ullamco ad. Consectetur occaecat ex consequat occaecat exercitation occaecat esse laboris dolor cupidatat. Excepteur incididunt laboris laborum exercitation Lorem ea dolore velit laboris adipisicing elit. Proident non qui laborum et voluptate fugiat veniam dolore eu. Do eu velit sunt dolore elit irure et exercitation.","registered":"Friday, June 9, 2017 12:38 AM","latitude":"-52.637226","longitude":"-17.246854","tags":["do","veniam","aliqua","veniam","magna"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Larson Burnett"},{"id":1,"name":"Kane Allen"},{"id":2,"name":"Marlene Davidson"}],"greeting":"Hello, Oconnor! You have 6 unread messages.","favoriteFruit":"banana"},{"_id":"5efadd9c8967bd119048f5ab","index":3,"guid":"63794bdf-2e8e-48aa-b493-d78966b0fda3","isActive":false,"balance":"$3,199.75","picture":"http://placehold.it/32x32","age":39,"eyeColor":"blue","name":{"first":"Bullock","last":"Dotson"},"company":"PORTALINE","email":"[email protected]","phone":"+1 (910) 499-3284","address":"391 Suydam Place, Eureka, Kansas, 3839","about":"Ullamco nisi reprehenderit anim occaecat cillum adipisicing tempor sunt. Do enim eiusmod anim id deserunt amet aliquip ut aliquip quis. Nostrud culpa nulla enim commodo reprehenderit est incididunt duis aute enim laboris velit officia. In veniam ad irure nulla est proident reprehenderit in minim anim nulla. Nisi proident labore enim ullamco. Cupidatat elit ullamco enim culpa consectetur.","registered":"Monday, October 1, 2018 5:10 PM","latitude":"-46.642782","longitude":"-174.679251","tags":["non","commodo","minim","nulla","Lorem"],"range":[0,1,2,3,4,5,6,7,8,9],"friends":[{"id":0,"name":"Sonja Tucker"},{"id":1,"name":"Graciela Michael"},{"id":2,"name":"Thomas Lindsey"}],"greeting":"Hello, Bullock! You have 6 unread messages.","favoriteFruit":"strawberry"}]')
const contenedor = document.getElementById('container')
//data.forEach(element => {console.log(element)});
const renderData = (datos)=> datos.forEach(element => {
contenedor.innerHTML +=`<br> <div class="card">
<div class="card-header">${element.company}</div>
<div class="card-body">${element.about}</div>
<div class="card-footer">${element.greeting}</div>
</div>`
});
renderData(data);
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div id=container class="container-fluid">
<h2>Card Header and Footer</h2>
<div class="card" >
<div class="card-header">credo por html header</div>
<div class="card-body">credo por html body</div>
<div class="card-footer">credo por html footer</div>
</div>
</div>