How to access property of object array in JavaScript

JavaScript

In this post, we are going to learn How to access a property of an object array in JavaScript.We can access the property of an object by using multiple ways that are by using dot, for in loop, map(), array.from(), and reduce() method.

1. dot to Access property of object array in JavaScript

In this Javascript program example, We will learn how to access a property of the object. We have used the map() function to access the property Empname values. There are 2 different ways, mentioned in the below examples. Let us understand with the below example. 

let Employee = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
     {Empname: 'Tax', salary: 50000,EmpID:2,Dep:'IT'},
    
  ];
 
 
let objProp = Employee.map(Emp => Emp.Empname);

//another way
let objProp2 = Employee.map(({ Empname}) => Empname)
console.log(objProp);



console.log(objProp);

Output

[ 'John', 'jack', 'Tax' ]

2. Access property of object array

In this JavaScript Program, we have access to the property of Empname and used the Map function to get the values of this property.The array.map() method is iterated over the element of the array and modifies elements of the array by applying some function and returning the modified element as a new array.

let Employee = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
     {Empname: 'Tax', salary: 50000,EmpID:2,Dep:'IT'},
    
  ];
 
const getProp = prop => Employee => Employee[prop];
const Propname = getProp('Empname');
const Values = Employee.map(Propname);
console.log(Values);

Output

[ 'John', 'jack', 'Tax' ]

3. Access mutiple properties of object array

Sometimes we have to access mutiple properties from an array of objects.In this javascript program, we have used the map() function to get mutiple properties of objects.

let Employee = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
     {Empname: 'Tax', salary: 50000,EmpID:2,Dep:'IT'},
    
  ];
 
var resultobj = Employee.map(( {Empname,salary,EmpID} ) =>  ({Empname,salary,EmpID}) )
console.log(resultobj)

Output

[
  { Empname: 'John', salary: 60000, EmpID: 1 },
  { Empname: 'jack', salary: 50000, EmpID: 2 },
  { Empname: 'Tax', salary: 50000, EmpID: 2 }
]

4. array.from() to Access property of object in Javascript

The Javascript ES6 array.from() is a static method that creates an array object from arraylike or iterable objects(string, array, map, set). We can access a property of an object by using an array.from(), in this below example we are accessing the Empname from the employee object.

let Employee = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
     {Empname: 'Tax', salary: 50000,EmpID:2,Dep:'IT'},
    
  ];
 
resultobj = Array.from(Employee, Emp => Emp.Empname);
console.log(resultobj)

Output

[ 'John', 'jack', 'Tax' ]

5. Reduce() to access property of object

In this example, We are going to use reduce() along with object.values (),map() function to get the values of an object by using this we will access mutiple properties.

let Employee = [
    {Empname: 'John', salary: 60000,EmpID:1,Dep:'Admin'},
    {Empname: 'jack', salary: 50000,EmpID:2,Dep:'IT'},
     {Empname: 'Tax', salary: 50000,EmpID:2,Dep:'IT'},
    
  ];
Values = Employee.reduce((acc, obj) => [...acc, Object.values(obj).map(Emp => Emp)], []);

console.log(Values)

Output

[
  [ 'John', 60000, 1, 'Admin' ],
  [ 'jack', 50000, 2, 'IT' ],
  [ 'Tax', 50000, 2, 'IT' ]
]

6. For in loop to access property of array

Another way to get mutiple properties of an array of objects by using for-in loop iterate over the key values of each object in an array of object and push the key-value pair in an array and finally display propety.

let arr= [];
for (let key in Employee) 
{
  
  for (let x in Employee[key]) 
  {
    arr.push(Employee[key][x]);
  }
}

console.log(arr)

Output

[
  'John',  60000,  1,
  'Admin', 'jack', 50000,
  2,       'IT',   'Tax',
  50000,   2,      'IT'
]

Summary

In this post we have learned how to access property of object array in JavaScript with examples by using different mutiple ways that are by using dot, for in loop, map(), array.from() and reduce() method.

Related Posts