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

The conversion of string to number is not getting displayed correctly when using console.log or document.write. Additionally, the concatenated display is also not functioning as intended

Azure SQL Server linked with a REST API built on Express.js/Node.js encountered an error stating: "TypeError: req.sql is not a function"

Injecting services differently in specific scenarios in AngularJS

Advantages of utilizing bracket notation (alongside variables) for retrieving a property from an object

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Collaborate and reuse Typescript code across various Node projects

Leverage the power of npm packages within a Flutter mobile app's webview

Using Backbone to Retrieve a JSON File from a Server: Deciding Whether to Include the File Extension ".json" in the URL or URLRoot

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

The child div can be scrolled horizontally, while the parent window remains fixed

Issues with Weglot link hooks not functioning properly within the sticky header

Data is not loaded until after the HTML for the Nuxt page has been

Conceal the div with ID "en" if the value matches $en

extract data from a JSON-formatted object

Looking for a way to detect changes in a select menu using Angular?

Adjust properties based on screen size with server-side rendering compatibility

I cannot seem to locate the module npm file

Using PHP variables in JavaScript is not compatible

Experiencing difficulty in transferring array information from a parent component to a child component within an

Fragment errors detected in the Menu Component