How can you combine multiple arrays of nested objects in ES6?

Question

How can you combine multiple arrays of nested objects in ES6?

Here is an example array I have:

[
  {
    data: [
      { a: "a", b: "b" },
      { x: "x", y: "y" },
    ],
  },
  {
    data: [
      { c: "c", d: "d" },
      { z: "z", f: "f" },
    ],
  },
  {
    data: [
      { d: "d", e: "e" },
      { g: "g", h: "h" },
    ],
  },
];

I am looking to merge all items in the 'data' arrays into one single array, resulting in:

[
  { a: "a", b: "b" },
  { x: "x", y: "y" },
  { c: "c", d: "d" },
  { z: "z", f: "f" },
  { d: "d", e: "e" },
  { g: "g", h: "h" },
];

I prefer not to use lodash as suggested in other questions, and would like to achieve this using only ES6 features.

javascript

Answer 1

Answer №1

By utilizing the power of Array.prototype.flatMap, you can consolidate all data items into a single array.

const input = [
  {
    data: [
      { a: "a", b: "b" },
      { x: "x", y: "y" },
    ],
  },
  {
    data: [
      { c: "c", d: "d" },
      { z: "z", f: "f" },
    ],
  },
  {
    data: [
      { d: "d", e: "e" },
      { g: "g", h: "h" },
    ],
  },
];

const output = input.flatMap((item) => item.data);
console.log(output);

Answer 2

By utilizing the power of Array.prototype.flatMap, you can consolidate all data items into a single array.

const input = [
  {
    data: [
      { a: "a", b: "b" },
      { x: "x", y: "y" },
    ],
  },
  {
    data: [
      { c: "c", d: "d" },
      { z: "z", f: "f" },
    ],
  },
  {
    data: [
      { d: "d", e: "e" },
      { g: "g", h: "h" },
    ],
  },
];

const output = input.flatMap((item) => item.data);
console.log(output);

Answer 3

Answer №2

If you are in search of the following:

const elements = [
  {
    items: [
      { name: "John", age: 25 },
      { name: "Jane", age: 30 },
    ],
  },
  {
    items: [
      { color: "red", size: "small" },
      { color: "blue", size: "large" },
    ],
  },
  {
    items: [
      { fruit: "apple", taste: "sweet" },
      { fruit: "banana", taste: "tangy" },
    ],
  },
];

const result = elements.map(e => e.items).flat();
console.log(result)

Answer 4

If you are in search of the following:

const elements = [
  {
    items: [
      { name: "John", age: 25 },
      { name: "Jane", age: 30 },
    ],
  },
  {
    items: [
      { color: "red", size: "small" },
      { color: "blue", size: "large" },
    ],
  },
  {
    items: [
      { fruit: "apple", taste: "sweet" },
      { fruit: "banana", taste: "tangy" },
    ],
  },
];

const result = elements.map(e => e.items).flat();
console.log(result)

Answer 5

Answer №3

const information = [
  {
    details: [
      { name: "Alice", age: 30 },
      { city: "New York", country: "USA" },
    ],
  },
  {
    details: [
      { name: "Bob", age: 25 },
      { city: "London", country: "UK" },
    ],
  },
  {
    details: [
      { name: "Charlie", age: 35 },
      { city: "Sydney", country: "Australia" },
    ],
  },
];

let combinedData = []
let newDataSet = information.map(item => item.details.map(entry => combinedData.push(entry)))
console.log(combinedData)

Answer 6

const information = [
  {
    details: [
      { name: "Alice", age: 30 },
      { city: "New York", country: "USA" },
    ],
  },
  {
    details: [
      { name: "Bob", age: 25 },
      { city: "London", country: "UK" },
    ],
  },
  {
    details: [
      { name: "Charlie", age: 35 },
      { city: "Sydney", country: "Australia" },
    ],
  },
];

let combinedData = []
let newDataSet = information.map(item => item.details.map(entry => combinedData.push(entry)))
console.log(combinedData)

Answer 7

Answer №4

Utilize the array reduce function.

let b = [
  {
    info: [
      { first: "first", second: "second" },
      { red: "red", blue: "blue" },
    ],
  },
  {
    info: [
      { one: "one", two: "two" },
      { green: "green", yellow: "yellow" },
    ],
  },
  {
    info: [
      { three: "three", four: "four" },
      { orange: "orange", purple: "purple" },
    ],
  },
];

let result = b.reduce((previous, current) => previous.concat(current.info), []);
console.log(result);

Answer 8

Utilize the array reduce function.

let b = [
  {
    info: [
      { first: "first", second: "second" },
      { red: "red", blue: "blue" },
    ],
  },
  {
    info: [
      { one: "one", two: "two" },
      { green: "green", yellow: "yellow" },
    ],
  },
  {
    info: [
      { three: "three", four: "four" },
      { orange: "orange", purple: "purple" },
    ],
  },
];

let result = b.reduce((previous, current) => previous.concat(current.info), []);
console.log(result);

Answer 9

Answer №5

One efficient method is to utilize the reduce function along with the spread operator:

const arr = [
  {
    data: [
      { a: "a", b: "b" },
      { x: "x", y: "y" },
    ],
  },
  {
    data: [
      { c: "c", d: "d" },
      { z: "z", f: "f" },
    ],
  },
  {
    data: [
      { d: "d", e: "e" },
      { g: "g", h: "h" },
    ],
  },
];

const newArr = arr.reduce((acc, rec) => [...acc, ...rec.data], [])

Answer 10

One efficient method is to utilize the reduce function along with the spread operator:

const arr = [
  {
    data: [
      { a: "a", b: "b" },
      { x: "x", y: "y" },
    ],
  },
  {
    data: [
      { c: "c", d: "d" },
      { z: "z", f: "f" },
    ],
  },
  {
    data: [
      { d: "d", e: "e" },
      { g: "g", h: "h" },
    ],
  },
];

const newArr = arr.reduce((acc, rec) => [...acc, ...rec.data], [])

How can you combine multiple arrays of nested objects in ES6?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

"Extracting regular expressions between the penultimate and ultimate characters

Error in bundle.js at line 25872: A critical error has occurred due to excessive re-renders. React has imposed a limit on the number of renders to avoid an infinite loop. Learn how to resolve

Create an interactive list with the ability to be edited using HTML and

Error loading code. Works when manually pasted, but not when executed with JavaScript

Is the node certificate store limited to reading only from a predefined list of certificates?

Organize the array by property name and include a tally for each group

Displaying the second image twice in a jQuery image slider

Encountering difficulties in importing TailwindCSS

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

Estimating Dates Using Javascript and JSON

Illuminate a corresponding regular expression within a text input

The filter is displaying incorrect categories

Proceed with executing the function only if the current date is before the specified date

Getting a boolean response from an asynchronous SQLite query in Express

Encountered an uncaughtException in Node.js and mongoDB: User model cannot be overwritten once compiled

Display or conceal specific fields depending on the selection from a dropdown menu

What is the best way to integrate Express JS with Google Charts?

Using three.js to establish an Image for Particle

Using jQuery to clear a textarea when a select input is changed

Update header component dynamically upon successful login with Angular 11