Unwinding Object Arrays in JavaScript

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will explore the unwind function in JavaScript. The purpose of this function is to produce an array of objects from an object and one of its array-valued properties. By using object destructuring and Array.prototype.map(), we can create an array of objects where each object contains the original object's values, except for the specified key which is mapped to its individual values. Through this lab, we will gain a deeper understanding of how to manipulate and extract data from objects in 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/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") 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-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/data_types -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/arith_ops -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/comp_ops -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/array_methods -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/higher_funcs -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/destr_assign -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} javascript/spread_rest -.-> lab-28684{{"`Unwinding Object Arrays in JavaScript`"}} end

Unwind Object Function

To unwind an object by its array-valued property, use the unwind function.

  • To get started with coding, open the Terminal/SSH and type node.
  • The function uses object destructuring to exclude the key-value pair for the specified key from the object.
  • Then, it uses Array.prototype.map() for the values of the given key to create an array of objects.
  • Each object contains the original object's values, except for key which is mapped to its individual values.
const unwind = (key, obj) => {
  const { [key]: _, ...rest } = obj;
  return obj[key].map((val) => ({ ...rest, [key]: val }));
};

Example usage:

unwind("b", { a: true, b: [1, 2] }); // [{ a: true, b: 1 }, { a: true, b: 2 }]

Summary

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

Other JavaScript Tutorials you may like