Map an Object to an Array

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will learn how to map an object to an object array using the listify() function in JavaScript. The function uses Object.entries() and Array.prototype.reduce() to map the object and mapFn to map the keys and values of the object. By the end of this lab, you will be able to efficiently map objects to arrays using JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/data_types -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/arith_ops -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/comp_ops -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/higher_funcs -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/destr_assign -.-> lab-28472{{"`Map an Object to an Array`"}} javascript/spread_rest -.-> lab-28472{{"`Map an Object to an Array`"}} end

How to Map an Object to an Array in JavaScript

To map an object to an array in JavaScript, you can use the listify() function. Here's how you can do it:

  1. Open the Terminal/SSH and type node to start practicing coding.

  2. Use Object.entries() to get an array of the object's key-value pairs.

  3. Use Array.prototype.reduce() to map the array to an object.

  4. Use mapFn to map the keys and values of the object and Array.prototype.push() to add the mapped values to the array.

Here's the code for the listify() function:

const listify = (obj, mapFn) =>
  Object.entries(obj).reduce((acc, [key, value]) => {
    acc.push(mapFn(key, value));
    return acc;
  }, []);

And here's an example of how to use it with an object called people:

const people = { John: { age: 42 }, Adam: { age: 39 } };
listify(people, (key, value) => ({ name: key, ...value }));
// [ { name: 'John', age: 42 }, { name: 'Adam', age: 39 } ]

With this function, you can easily map an object to an array in JavaScript.

Summary

Congratulations! You have completed the Map an Object to an Array lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like