Using es6 map to deconstruct an array inside an object and returning it

Question

Using es6 map to deconstruct an array inside an object and returning it

I am looking to optimize my code by returning a deconstructed array that only contains individual elements instead of nested arrays.

const data = [
{
    title: 'amsterdam',
    components: [
      {
        id: 1,
        name: 'yanick',    
      },
      {
        id: 2,
        name: 'ronald',    
      },
    ],  
  },
  
  {
    title: 'rotterdam',
    components: [
      {
        id: 4,
        name: 'nicky',    
      },
      {
        id: 3,
        name: 'casper',    
      },
    ],  
  },
];

const test = data
  .map(item => {
    console.log(item.components);
    return item.components;
  }).map(array => {
  // how to get comibned components here?
    // it can't use ...item.components (deconstructing or something)
  });
  
console.log('test', test);

My goal is to utilize chained map functions in order to consolidate all elements from item.components into a single array. Is this achievable? It appears that I am unable to destructure the array of each item individually.

javascript arrays chain

Answer 1

Answer №1

The perfect method to apply in this scenario appears to be <code>Array.prototype.reduce

.

const result = numbers.reduce( (finalResult, currentNumber) => finalResult.concat(currentNumber.digits) , []);

console.log('result', result);

Output

result [ { digit: 1, value: 'one' },
  { digit: 2, value: 'two' },
  { digit: 4, value: 'four' },
  { digit: 3, value: 'three' } ]

Answer 2

The perfect method to apply in this scenario appears to be <code>Array.prototype.reduce

.

const result = numbers.reduce( (finalResult, currentNumber) => finalResult.concat(currentNumber.digits) , []);

console.log('result', result);

Output

result [ { digit: 1, value: 'one' },
  { digit: 2, value: 'two' },
  { digit: 4, value: 'four' },
  { digit: 3, value: 'three' } ]

Answer 3

Answer №2

Retrieve the elements utilizing Array.map(), then combine them by spreading into Array.concat():

const data = [{"title":"paris","elements":[{"id":1,"name":"sophie"},{"id":2,"name":"lucas"}]},{"title":"berlin","elements":[{"id":4,"name":"max"},{"id":3,"name":"mila"}]}];

const output = [].concat(...data.map(obj => obj.elements));

console.log(output);

Answer 4

Retrieve the elements utilizing Array.map(), then combine them by spreading into Array.concat():

const data = [{"title":"paris","elements":[{"id":1,"name":"sophie"},{"id":2,"name":"lucas"}]},{"title":"berlin","elements":[{"id":4,"name":"max"},{"id":3,"name":"mila"}]}];

const output = [].concat(...data.map(obj => obj.elements));

console.log(output);

Answer 5

Answer №3

If you want to consolidate data into a single array, you can utilize the reduce function along with concat to merge all results into one array.

const data = [
{
    title: 'amsterdam',
    components: [
      {
        id: 1,
        name: 'yanick',
      },
      {
        id: 2,
        name: 'ronald',
      },
    ],
  },

  {
    title: 'rotterdam',
    components: [
      {
        id: 4,
        name: 'nicky',
      },
      {
        id: 3,
        name: 'casper',
      },
    ],
  },
];

const test = data
  .map(item => {
    return item.components;
  }).reduce((res, item) => {
    return res.concat(item);
  }, []);

console.log('test', test);

Answer 6

If you want to consolidate data into a single array, you can utilize the reduce function along with concat to merge all results into one array.

const data = [
{
    title: 'amsterdam',
    components: [
      {
        id: 1,
        name: 'yanick',
      },
      {
        id: 2,
        name: 'ronald',
      },
    ],
  },

  {
    title: 'rotterdam',
    components: [
      {
        id: 4,
        name: 'nicky',
      },
      {
        id: 3,
        name: 'casper',
      },
    ],
  },
];

const test = data
  .map(item => {
    return item.components;
  }).reduce((res, item) => {
    return res.concat(item);
  }, []);

console.log('test', test);

Using es6 map to deconstruct an array inside an object and returning it

Answer №1

Answer №2

Answer №3

Similar questions

Developing a MySQL Community Server-backed RESTful Web Service with the power of jQuery AJAX

What is a way to automatically run a function at specific intervals in PHP, similar to the setTimeout() function in JavaScript?

Creating images or PDFs from HTML with CSS filters: a guide

During the iterations, my array only retains values temporarily. Once the process is complete and I attempt to access those values, it unfortunately returns Null values

Mapping an array of objects within another array of objects

Is there a way to transform this pledge back into a JSON array format?

Encountering an error when attempting to access the 'path' property of undefined from a user-defined input file in Bootstrap 4

Scrolling through four limited list items automatically

Is it possible in Swift to determine the type of an Element in an Array and then utilize it to define the generic type argument?

Ensure that the React Material UI Textfield with the type "number" is validated to have exactly 10 characters

What is the approach to initiating a jquery function once HTML content is dynamically added through an AJAX call?

Merge two scripts together

Custom sample rate options in RecordRTC allow for the recording of silent audio tracks

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

Storing data from PHP in Local Storage using JavaScript variable

What is the method to design a file upload feature without a specific form using JavaScript?

Unable to successfully export ExpressJS routes to an external file when targeting the root path

retrieving the current value of a variable from a jQuery function

Any property modified by an event handler will consistently appear in its original form

How can permissions for video and audio be configured in Next.js?