Home › Courses › JavaScript Array of Objects Explained - Loop, Map, UI Display

JavaScript Array of Objects Explained - Loop, Map, UI Display

33 / 57

What is Array of Objects?

  1. Object stores data of a single user or single item
  2. When we have multiple users or multiple items, one object is not enough
  3. In that case, we use array of objects


Example of Problem


let users = {
name: "anil"
};

  1. Cannot store multiple users
  2. If we add another name, it will overwrite previous value


Array of Objects Syntax


let users = [
{ name: 'anil', age: 29, email: 'anil@test.com' },
{ name: 'sam', age: 25, email: 'sam@test.com' },
{ name: 'peter', age: 34, email: 'peter@test.com' }
];

  1. Array is created using []
  2. Objects are inside array using {}


Looping on Array of Objects

for...of loop


for (let user of users) {
console.log(user);
}

  1. user represents each object

Access data:


user.name
user.age


Display Data on UI

HTML


<ul id="user-list"></ul>

JavaScript


let list = document.getElementById('user-list');
list.innerHTML = "";

Using Loop


for (let user of users) {
list.innerHTML += "<li>Hello, User name is <b> "
+ user.name + " </b> and user age is <b> "
+ user.age + " </b></li>";
}


Using map


users.map((user) => {
list.innerHTML += "<li>Hello, User name is <b> "
+ user.name + " </b> and user age is <b> "
+ user.age + " </b></li>";
});


Using forEach


users.forEach((user) => {
list.innerHTML += "<li>Hello, User name is <b> "
+ user.name + " </b> and user age is <b> "
+ user.age + " </b></li>";
});


Key Points from Script

  1. Array of objects is used when data is multiple
  2. Each object stores one user’s data
  3. Loop is required to access each object
  4. Data can be displayed on UI using innerHTML
  5. for...of, map, and forEach can be used for iteration


Share this lesson: