How do I list Javascript array of objects in HTML

Tom

I have an array of objects like this:

const people = [
    { name: 'Bill', dob: '1949-08-11' },
    { name: 'Jill', dob: '1949-08-18' }
]

I'd like to list them inside my html document, inside a wrapper div.

This is what I tried. I'm using a for loop like this:

for (let i = 0; i < people.length; i++) {
    wrapper.innerHTML = people[i].name   
}

But this only outputs one name.

The same happens when I try it with forEach

people.forEach( person => {
    console.log(person.name)
   wrapper.innerHTML = person.name
})

The console.log lists both names, but in the html only one item is listed.

What am I doing wrong?

lucumt

You can use a variable to store it

var content = "";
for (let i = 0; i < people.length; i++) {
    content += people[i].name + " ";   
}
wrapper.innerHTML = content;

Another choice is to create element dynamiclly

const people = [
    { name: 'Bill', dob: '1949-08-11' },
    { name: 'Jill', dob: '1949-08-18' }
];

var ul = document.querySelector("#user_list");
people.forEach(p =>{
  var li = document.createElement("li");
  li.innerHTML = "name: " +p.name +"    dob: " + p.dob;
  ul.append(li);
});
<div>
  User infos:
  <ul id="user_list">
  </ul>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can i list an array of objects in Javascript?

How can i do a list of objects in javascript?

How do I merge an array of objects in Javascript?

How do I declare the objects having array of objects in JavaScript?

How do I convert this php array into a JavaScript array of objects?

How do I filter an array object inside of a array of objects Javascript?

How do I create a react list component from an array of objects?

How do I find ID in an Array List of student objects

How do I convert a named list to an array of objects

How do I add an array of objects into an HTML Table?

How do I get the value of a key from a list of objects in Javascript?

How do I write a json list with objects in javascript

How do I remove objects from a JavaScript associative array?

Javascript - How do I map an array of objects to a datatable with column names?

How do I modify an object value in a cloned array of objects in Javascript

How do I convert array of Objects into one Object in JavaScript?

How do I create a javascript array of lists of objects?

How do I convert an array of objects into an object (dynamically) in JavaScript

How do I reuse objects in an array for a particle system in JavaScript/jQuery?

How do I convert array of objects to object in javascript?

How do I check if a particular object exist or not in a JavaScript array of objects?

How do I return an array of objects with certain conditions in Javascript?

How do I convert array of Objects to one Object in JavaScript?

How do I call a method on an array of objects in javascript?

How do I filter and count objects in a javascript array?

How do I create an object from array of objects using javascript?

how do I replace values of specific keys in an array of objects? javascript

How do I filter an array of objects inside of an array of objects Using javascript?

Javascript - filtering a list: how can I find an intersection between an array with objects including array and an array?