I have encountered an issue where my 2 Javascript objects are not displaying in separate columns on the DOM. The requirement is to showcase the details of two individuals on a 2 Column page, with one person's information on each side.
My approach involved using a loop to append data to the two div columns that I had created. Within the body, there is a div container with distinct id attributes for appending purposes.
sabio.page.startUp = () => {
people = [{
"firstName": "John",
"lastName": "Doe",
"age": 23,
"streetAddress": "123 Main St.",
"city": "Culver City",
"state": "CA",
"zip": 92340
},
{
"firstName": "Juan",
"lastName": "Doe",
"age": 47,
"streetAddress": "123 Main St.",
"city": "Culver City",
"state": "CA",
"zip": 92340
}
]
console.log(people);
sabio.page.mapObjFunc(people);
}
sabio.page.mapObjFunc = person => {
for (let i = 0; i < people.length; i++) {
console.log(i);
$("#div" + i).append("<h1>" + i + ": " + people[i] + "</h1>");
people[i] + "<br>";
}
}<div class="container">
<div class="row">
<div class="col-sm-6" id="div0">
<h1>Column 1</h1>
</div>
<div class="col-sm-6" id="div1">
<h1>Column 2</h1>
</div>
</div>
</div>The desired outcome is to have both people object displayed on the DOM in individual columns. Despite deploying my code live, I am not encountering any error messages.