Fetch specific values from array of objects in JavaScript?

Fetching specific values from an array of objects is a common JavaScript task. This article demonstrates multiple approaches to filter and extract data based on specific criteria.

Sample Data

Let's start with an array of employee objects:

const details = [
    {
        employeeFirstName: "John",
        employeeLastName: "Doe"
    },
    {
        employeeFirstName: "David",
        employeeLastName: "Miller"
    },
    {
        employeeFirstName: "John",
        employeeLastName: "Smith"
    }
];

console.log("Sample data:", details);

Sample data: [
  { employeeFirstName: 'John', employeeLastName: 'Doe' },
  { employeeFirstName: 'David', employeeLastName: 'Miller' },
  { employeeFirstName: 'John', employeeLastName: 'Smith' }
]

Using for Loop

The traditional approach uses a for loop to iterate through the array:

const details = [
    { employeeFirstName: "John", employeeLastName: "Doe" },
    { employeeFirstName: "David", employeeLastName: "Miller" },
    { employeeFirstName: "John", employeeLastName: "Smith" }
];

for (var index = 0; index 

FirstName=John LastName=Doe
FirstName=John LastName=Smith


Using filter() Method

The modern approach uses the filter() method to return matching objects:

const details = [
    { employeeFirstName: "John", employeeLastName: "Doe" },
    { employeeFirstName: "David", employeeLastName: "Miller" },
    { employeeFirstName: "John", employeeLastName: "Smith" }
];

const johnEmployees = details.filter(employee => employee.employeeFirstName === "John");

johnEmployees.forEach(employee => {
    console.log(`FirstName=${employee.employeeFirstName} LastName=${employee.employeeLastName}`);
});

console.log("Filtered array:", johnEmployees);


FirstName=John LastName=Doe
FirstName=John LastName=Smith
Filtered array: [
  { employeeFirstName: 'John', employeeLastName: 'Doe' },
  { employeeFirstName: 'John', employeeLastName: 'Smith' }
]


Using map() to Extract Specific Properties

To extract only specific properties from matching objects:

const details = [
    { employeeFirstName: "John", employeeLastName: "Doe" },
    { employeeFirstName: "David", employeeLastName: "Miller" },
    { employeeFirstName: "John", employeeLastName: "Smith" }
];

// Get only last names of employees named "John"
const johnLastNames = details
    .filter(employee => employee.employeeFirstName === "John")
    .map(employee => employee.employeeLastName);

console.log("John's last names:", johnLastNames);


John's last names: [ 'Doe', 'Smith' ]


Comparison of Methods

Conclusion

Use filter() for modern, readable code when you need to extract objects matching specific criteria. Combine with map() to transform the results further.