Utilizing ES6 Functions to Transform Objects into Arrays

Question

Utilizing ES6 Functions to Transform Objects into Arrays

Is there a way to convert a JavaScript object into an array using ECMAScript-6?

Take, for instance:

 var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};

The desired outcome would look like this:

 ['foo', [1,2,3], null, 55]

The sequence of elements in the resulting array does not matter to me.

javascript arrays ecmascript-6

Answer 1

Answer №1

Prefer using (ES5) Array::map instead of iterating over the object keys with an arrow function (for concise syntax but same functionality):

let arr = Object.keys(obj).map((k) => obj[k])

A more modern ES6 approach would involve creating a generator and converting it into an array:

function* values(obj) {
    for (let prop of Object.keys(obj)) // consider using
                                       // for (let prop in obj)
        yield obj[prop];
}
let arr = Array.from(values(obj));

Unfortunately, there is no built-in object iterator available in ES6.

Answer 2

Prefer using (ES5) Array::map instead of iterating over the object keys with an arrow function (for concise syntax but same functionality):

let arr = Object.keys(obj).map((k) => obj[k])

A more modern ES6 approach would involve creating a generator and converting it into an array:

function* values(obj) {
    for (let prop of Object.keys(obj)) // consider using
                                       // for (let prop in obj)
        yield obj[prop];
}
let arr = Array.from(values(obj));

Unfortunately, there is no built-in object iterator available in ES6.

Answer 3

Answer №2

To easily retrieve the values from an object, you can simply utilize the Object.values method.

const objValues = Object.values(inputObject); // Result: ['bar', [4,5,6], undefined, 99]

Answer 4

To easily retrieve the values from an object, you can simply utilize the Object.values method.

const objValues = Object.values(inputObject); // Result: ['bar', [4,5,6], undefined, 99]

Answer 5

Answer №3

Latest Update for August 2020

To simplify, within the realm of ES6 functionality, there exist three different ways to transform an Object into an Array:

const MyObjects = {   name: 'John Doe',   age: 30, };

// Approach 1: Transforming keys into an Array
// -------------------------------------------

Object.keys(MyObjects);
// ['name', 'age']

// Approach 2: Converting Values into an Array
// -------------------------------------------

Object.values(MyObjects);
// ['John Doe', 30]

// Approach 3: Changing both Keys and Values into Arrays
// -----------------------------------------------------

Object.entries(MyObjects);
// [ ['name', 'John Doe'], ['age', 30'] ]

Reversing the process, transforming an Array back into an Object, can be achieved as follows:

const array = [  ['first', 1],   ['second', 2], ];

Object.fromEntries(array);

// { first: 1, second: 2 }

Answer 6

Latest Update for August 2020

To simplify, within the realm of ES6 functionality, there exist three different ways to transform an Object into an Array:

const MyObjects = {   name: 'John Doe',   age: 30, };

// Approach 1: Transforming keys into an Array
// -------------------------------------------

Object.keys(MyObjects);
// ['name', 'age']

// Approach 2: Converting Values into an Array
// -------------------------------------------

Object.values(MyObjects);
// ['John Doe', 30]

// Approach 3: Changing both Keys and Values into Arrays
// -----------------------------------------------------

Object.entries(MyObjects);
// [ ['name', 'John Doe'], ['age', 30'] ]

Reversing the process, transforming an Array back into an Object, can be achieved as follows:

const array = [  ['first', 1],   ['second', 2], ];

Object.fromEntries(array);

// { first: 1, second: 2 }

Answer 7

Answer №4

I prefer sticking to traditional methods:

let index = 0;
let array = [];
for (let key in inputObject) {
  array[index++] = key;
}

The old school approach dominates the jsperf test by a significant margin, despite possibly lacking popularity. Sometimes new features can be more of a hindrance than an improvement.

Answer 8

I prefer sticking to traditional methods:

let index = 0;
let array = [];
for (let key in inputObject) {
  array[index++] = key;
}

The old school approach dominates the jsperf test by a significant margin, despite possibly lacking popularity. Sometimes new features can be more of a hindrance than an improvement.

Answer 9

Answer №5

One way to accomplish this is by using the Array Comprehension syntax:

[for (key of Object.keys(dataObject)) dataObject[key]]

For example:

var dataObject = {name:'John', age:25, city:'New York'};
var dataArray = [for (key of Object.keys(dataObject)) dataObject[key]];
console.log(dataArray);

// output: [ 'John', 25, 'New York' ]

Answer 10

One way to accomplish this is by using the Array Comprehension syntax:

[for (key of Object.keys(dataObject)) dataObject[key]]

For example:

var dataObject = {name:'John', age:25, city:'New York'};
var dataArray = [for (key of Object.keys(dataObject)) dataObject[key]];
console.log(dataArray);

// output: [ 'John', 25, 'New York' ]

Answer 11

Answer №6

Using ES7 method:

let data = { name: "John", age: 30, city: "New York", hobbies: ["Reading", "Hiking"] }

Object.values(data)

// Result --> ['John', 30, 'New York', ['Reading', 'Hiking']]

Answer 12

Using ES7 method:

let data = { name: "John", age: 30, city: "New York", hobbies: ["Reading", "Hiking"] }

Object.values(data)

// Result --> ['John', 30, 'New York', ['Reading', 'Hiking']]

Answer 13

Answer №7

Array.map equivalent of @User123's arrow function (check out the MDN for more info on Array.map).

Edit 2021: updated to a snippet and included an alternative approach

const data = {
    x: 'bar',
    y: [4, 5, 6],
    z: null,
    w: 99
  },
  newArray = Object.keys(data).map(key => obj[key]),
  // Alternative Method
  newArr2 = Object.fromEntries(Object.entries(data));
  newArr.x = "foo";
  newArr2.x = "foo123"
  console.log(`data.x: ${data.x}, newArray.x: ${newArray.x}, newArr2.x: ${newArr2.x}`);

Answer 14

Array.map equivalent of @User123's arrow function (check out the MDN for more info on Array.map).

Edit 2021: updated to a snippet and included an alternative approach

const data = {
    x: 'bar',
    y: [4, 5, 6],
    z: null,
    w: 99
  },
  newArray = Object.keys(data).map(key => obj[key]),
  // Alternative Method
  newArr2 = Object.fromEntries(Object.entries(data));
  newArr.x = "foo";
  newArr2.x = "foo123"
  console.log(`data.x: ${data.x}, newArray.x: ${newArray.x}, newArr2.x: ${newArr2.x}`);

Answer 15

Answer №8

let person1 = {
        name: "John Doe",
        age: 30,
        profession: "Engineer"
    };
    let person2 = {
        name: "Jane Smith",
        age: 25,
        profession: "Doctor"
    };

We have two different people with their information stored in objects, and now I will demonstrate 2 methods to combine both objects into an array.

Object.entries()
Object.keys()

The first method is demonstrated below:

let firstArray = Object.entries(person1);

Here, we assigned the details of person1 to firstArray, and upon running this code, you will get output similar to this:

(3) [Array(2), Array(2), Array(2)]

The second method is shown here:

let secondArray = Object.keys(person2);

In this case, we assigned the details of person2 to secondArray, and when executed, the output will be:

(3) ["name", "age", "profession"]

Answer 16

let person1 = {
        name: "John Doe",
        age: 30,
        profession: "Engineer"
    };
    let person2 = {
        name: "Jane Smith",
        age: 25,
        profession: "Doctor"
    };

We have two different people with their information stored in objects, and now I will demonstrate 2 methods to combine both objects into an array.

Object.entries()
Object.keys()

The first method is demonstrated below:

let firstArray = Object.entries(person1);

Here, we assigned the details of person1 to firstArray, and upon running this code, you will get output similar to this:

(3) [Array(2), Array(2), Array(2)]

The second method is shown here:

let secondArray = Object.keys(person2);

In this case, we assigned the details of person2 to secondArray, and when executed, the output will be:

(3) ["name", "age", "profession"]

Utilizing ES6 Functions to Transform Objects into Arrays

Answer №1

Answer №2

Answer №3

Latest Update for August 2020

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

What are the steps to integrate mailjet into my Vue application?

Redux does not have the capability to insert an object into an array

"Encountering an Invalid hook call error with React-Leaflet v4 and Next.js 13

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

Guide to connecting two geometric shapes together with the help of three.js

Generate a dynamic text-box and drop-down list using HTML and JavaScript

Guide on retrieving the response headers with jQuery and AJAX

In React, ensure a component's state is preserved when the browser history changes

What is the best way to loop through the individual bits of two byte arrays in Java?

Struggling to connect CSS and JavaScript files to index.html on Heroku while utilizing Node.js

How can we include a string in the request body in Node.js using Express?

Error: Papa is not defined. The file was loaded from the CDN in the header section

Store the output of a MySQL query as a variable in JavaScript code

The member's voiceChannel is undefined

The text entered in the textbox vanishes after I press the submit button

JavaScript: Converting an array of strings into an array of objects with proper formatting

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

The function's name has been obscured by the name of its parameter

Tips for preventing a component from updating state prior to data retrieval?

Revamping ng-model in AngularJS