Split array entries to form object in JavaScript

In JavaScript, converting array entries into objects is a common task. This article explores multiple approaches to split array elements and transform them into key-value pairs or structured objects.

Understanding the Problem

We need to convert array elements into objects. This can involve splitting string elements into key-value pairs or simply transforming array indices into object keys. Let's explore different methods to achieve this.

Using reduce() and split() Methods

This method splits array entries by a delimiter and groups them with counts, useful for data aggregation.

Example

// Define data in the form of array 
const data = [
   "Honda-Amaze",
   "Honda-Jazz",
   "Honda-Jazz",
   "Honda-SUV",
   "Volkswagen-Voyage",
   "Volkswagen-Atlas",
   "Volkswagen-Atlas",
   "Volkswagen-Voyage",
   "Fiat-Punto",
   "Fiat-Panda",
   "Fiat-Strada",
   "Fiat-Punto",
   "Fiat-Uno",
   "Ford-Fiesta",
   "Fiat-Uno",
];

// Split data using reduce and split functions
const result = data.reduce((acc, item) => {
  const [Company, model] = item.split("-");
  const key = Company + "-" + model;
  acc[key] = acc[key] || { Company, model, count: 0 };

  // Increment the count
  acc[key].count++;

  return acc;
}, {});

const output = Object.values(result);
console.log("The data in Key-Value pair with count:");
console.log(output);

Output

The data in Key-Value pair with count:
[
  { Company: 'Honda', model: 'Amaze', count: 1 },
  { Company: 'Honda', model: 'Jazz', count: 2 },
  { Company: 'Honda', model: 'SUV', count: 1 },
  { Company: 'Volkswagen', model: 'Voyage', count: 2 },
  { Company: 'Volkswagen', model: 'Atlas', count: 2 },
  { Company: 'Fiat', model: 'Punto', count: 2 },
  { Company: 'Fiat', model: 'Panda', count: 1 },
  { Company: 'Fiat', model: 'Strada', count: 1 },
  { Company: 'Fiat', model: 'Uno', count: 2 },
  { Company: 'Ford', model: 'Fiesta', count: 1 }
]

Using Object.assign() Method

The Object.assign() method converts an array to an object using array indices as keys.

Example

const cars = ["Honda", "Volkswagen", "Fiat", "Suzuki"];

// Using Object.assign to convert array to object
const objOutput = Object.assign({}, cars);

console.log("Output using Object.assign() method:");
console.log(objOutput);

Output

Output using Object.assign() method:
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

Using Spread Syntax (...)

The spread operator provides a concise way to convert arrays to objects with index-based keys.

Example

const cars = ["Honda", "Volkswagen", "Fiat", "Suzuki"];

// Using spread operator to convert array to object
const objOutput = {...cars};

console.log("Output using spread operator:");
console.log(objOutput);

Output

Output using spread operator:
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

Using forEach() Method

The forEach() method allows manual control over the conversion process.

Example

// Define an array
const cars = ["Honda", "Volkswagen", "Fiat", "Suzuki"];

// Using forEach method to convert array to object
const objOutput = {};

cars.forEach((element, i) => {
  objOutput[i] = element;
});

console.log("Output using forEach method:");
console.log(objOutput);

Output

Output using forEach method:
{ '0': 'Honda', '1': 'Volkswagen', '2': 'Fiat', '3': 'Suzuki' }

Comparison

Conclusion

Each method serves different purposes: use reduce() for complex transformations, spread operator or Object.assign() for simple conversions, and forEach() when you need custom logic. Choose based on your specific requirements.