Retrieve key and values from object in an array JavaScript

In JavaScript, extracting keys and values from objects within an array is a common task when processing data structures. This can be accomplished using built-in Object methods like Object.keys() and Object.values().

Understanding the Problem

When working with arrays of objects, you often need to access both the property names (keys) and their corresponding values. JavaScript objects are collections of key-value pairs, and the Object class provides methods to extract this information efficiently.

Using Object.keys() and Object.values()

The Object.keys() method returns an array of property names, while Object.values() returns an array of property values from an object.

const sampleObject = {name: 'John', age: 25, city: 'New York'};

console.log('Keys:', Object.keys(sampleObject));
console.log('Values:', Object.values(sampleObject));

Keys: [ 'name', 'age', 'city' ]
Values: [ 'John', 25, 'New York' ]

Method 1: Basic Keys and Values Extraction

This approach extracts keys from the first object and then iterates through all objects to get their values:

const employees = [
  {name: 'Amit', age: 30, department: 'IT'},
  {name: 'Ajay', age: 25, department: 'HR'},
  {name: 'Ankit', age: 35, department: 'Finance'}
];

// Get keys from the first object
const keys = Object.keys(employees[0]);
console.log('Available keys:', keys);

// Extract values for each object
employees.forEach((employee, index) => {
  const values = Object.values(employee);
  console.log(`Employee ${index + 1}:`, values);
});

Available keys: [ 'name', 'age', 'department' ]
Employee 1: [ 'Amit', 30, 'IT' ]
Employee 2: [ 'Ajay', 25, 'HR' ]
Employee 3: [ 'Ankit', 35, 'Finance' ]

Method 2: Combined Keys and Values Display

This method shows both keys and values together for each object:

const products = [
  {id: 1, name: 'Laptop', price: 999},
  {id: 2, name: 'Phone', price: 599},
  {id: 3, name: 'Tablet', price: 399}
];

products.forEach((product, index) => {
  const keys = Object.keys(product);
  const values = Object.values(product);
  
  console.log(`\nProduct ${index + 1}:`);
  console.log(`Keys: [${keys.join(', ')}]`);
  console.log(`Values: [${values.join(', ')}]`);
  console.log(`Object: ${JSON.stringify(product)}`);
});

Product 1:
Keys: [id, name, price]
Values: [1, Laptop, 999]
Object: {"id":1,"name":"Laptop","price":999}

Product 2:
Keys: [id, name, price]
Values: [2, Phone, 599]
Object: {"id":2,"name":"Phone","price":599}

Product 3:
Keys: [id, name, price]
Values: [3, Tablet, 399]
Object: {"id":3,"name":"Tablet","price":399}

Method 3: Using Object.entries()

For a more comprehensive approach, use Object.entries() to get both keys and values as pairs:

const students = [
  {name: 'Alice', grade: 'A', subject: 'Math'},
  {name: 'Bob', grade: 'B', subject: 'Science'}
];

students.forEach((student, index) => {
  console.log(`\nStudent ${index + 1}:`);
  Object.entries(student).forEach(([key, value]) => {
    console.log(`  ${key}: ${value}`);
  });
});

Student 1:
  name: Alice
  grade: A
  subject: Math

Student 2:
  name: Bob
  grade: B
  subject: Science

Comparison of Methods

Time Complexity

The time complexity is O(n × m), where n is the number of objects in the array and m is the average number of properties per object. The space complexity is O(m) for storing keys and values of each object.

Conclusion

Use Object.keys() and Object.values() for separate key and value extraction, or Object.entries() for key-value pairs. These methods provide efficient ways to process object data within arrays.