How can I transform an array of arrays into an object?

Question

How can I transform an array of arrays into an object?

Is there a way to convert an array of arrays into a JavaScript object? The condition being that the first element of each internal array becomes a key in the new object, with the following elements as its corresponding values?

If the first element occurs more than once within the internal arrays, can we ensure only one key is created for that element?

For instance:

var arr = [['a', 'b'], ['c', 'd'], ['a', 'e']]

The expected result would be:

var obj = {a: ["b", "e"], c: ["d"]}

In this example, even though a appeared twice in arr, only one key a was created in the final object along with key c.

javascript arrays json object

Answer 1

Answer №1

By utilizing the Array.prototype.reduce method, you can achieve this task in the following manner.

var data = [['x', 'y'], ['z', 'w'], ['x', 'v']];

const result = data.reduce((accumulator, current) => {
  accumulator[current[0]] ? accumulator[current[0]].push(current[1]) : accumulator[current[0]] = [current[1]];
  return accumulator;
}, {});
console.log(result);

Answer 2

By utilizing the Array.prototype.reduce method, you can achieve this task in the following manner.

var data = [['x', 'y'], ['z', 'w'], ['x', 'v']];

const result = data.reduce((accumulator, current) => {
  accumulator[current[0]] ? accumulator[current[0]].push(current[1]) : accumulator[current[0]] = [current[1]];
  return accumulator;
}, {});
console.log(result);

Answer 3

Answer №2

Here is a different approach:

let newArr = [['x', 'y'], ['z', 'w'], ['q', 'r']]
const newObj = {}
newArr.forEach(([key, value]) => newObj[key] = [...newObj[key] ?? [], value])

Answer 4

Here is a different approach:

let newArr = [['x', 'y'], ['z', 'w'], ['q', 'r']]
const newObj = {}
newArr.forEach(([key, value]) => newObj[key] = [...newObj[key] ?? [], value])

How can I transform an array of arrays into an object?

Answer №1

Answer №2

Similar questions

Validating the Javascript on my report page

The Ajax success or error message is only shown one time

The websocket connection to the production host has encountered issues, while it operates smoothly on localhost within Django

What is the significance of employing the `var` keyword in Vue.js?

Resolving CORS problem: Eliminating the 'Access-Control-Allow-Origin' Response Header in Angular

include the ReactToastify.css file in your project using the import statement

Using AFNetworking in Swift is a great way to handle

Having trouble retrieving a remote JSON link from a local HTML file in Google Chrome

Steps to develop a collaborative NPM package

Having trouble executing the typescript build task: Command 'C:Program' is not valid as an internal or external command

Assign value to an element in an array using the value from another element

Anticipated to provide a result upon completion of the arrow function with consistent-return

The functionality of event.preventDefault is not working as expected

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

Exploring the possibilities of web workers through object-oriented JavaScript, integrating ThreeJS and ScrollMagic

How can I dynamically resize a Bubble using CSV data based on the radius specified in a JSON file when a button is clicked?

The AJAX success callback is malfunctioning

Troubleshooting Issue: Minified CSS in Vue.js not displaying correctly when deployed on Azure static website

Best Practices for Laravel and Vue Collaboration

What is a clear indication that a <div> is filled with text?