Retrieving a specific value from a collection of nested arrays containing objects

Question

Retrieving a specific value from a collection of nested arrays containing objects

Having trouble extracting values from fields and have tried various methods like nesting the map function and concatenating fields without success.

I have an object with a structure similar to this:

[{ 
   name: 'sean', 
   age: 26, 
   address: 
      [{ 
         street: 'red'
       }, 
       { 
         street: 'blue'
       }]
}];

My goal is to extract the street value from this structure and store it in a new array. The desired result would be:

 const newArray = ['red', 'blue'];

The address field may contain multiple objects, so the solution should be scalable for handling one or many objects.

javascript typescript

Answer 1

Answer №1

const data = [
  {
    name: 'John',
    age: 30,
    address: [
      {street: 'Main St'},
      {street: 'Oak Ave'}
    ]
  },
  {
    name: 'Jane',
    age: 25,
    address: [
      {street: 'Maple Rd'},
      {street: 'Pine Lane'}
    ]
  }
];

const newStreetArray = input.flatMap(({address}) => address.map(({street}) => street));
console.log(newStreetArray);

Array.prototype.flatMap is a method that takes a callback function and returns a single array composed of the elements inside the arrays returned by the callback. Essentially, using array.flatMap(callback) achieves the same result as array.map(callback).flat().

In your comment, you mentioned attempting to use reduce and concat. However, based on MDN documentation:

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
It's important to note this approach can be inefficient with large arrays because it creates temporary arrays in each iteration which must then be garbage-collected. Instead of simply adding new elements, it copies elements from the current accumulator array into a new one.

Answer 2

const data = [
  {
    name: 'John',
    age: 30,
    address: [
      {street: 'Main St'},
      {street: 'Oak Ave'}
    ]
  },
  {
    name: 'Jane',
    age: 25,
    address: [
      {street: 'Maple Rd'},
      {street: 'Pine Lane'}
    ]
  }
];

const newStreetArray = input.flatMap(({address}) => address.map(({street}) => street));
console.log(newStreetArray);

Array.prototype.flatMap is a method that takes a callback function and returns a single array composed of the elements inside the arrays returned by the callback. Essentially, using array.flatMap(callback) achieves the same result as array.map(callback).flat().

In your comment, you mentioned attempting to use reduce and concat. However, based on MDN documentation:

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
It's important to note this approach can be inefficient with large arrays because it creates temporary arrays in each iteration which must then be garbage-collected. Instead of simply adding new elements, it copies elements from the current accumulator array into a new one.

Retrieving a specific value from a collection of nested arrays containing objects

Answer №1

Similar questions

Having trouble verifying the selection option in Angular 6

Veracode Scan finds vulnerability in jQuery html method with Improper Neutralization of Script-Related HTML Tags in a Web Page error

Is it possible to adjust the opacity when the image attribute is altered?

The object literal can only define existing properties, and the property 'allAwsRegions' is not found in the 'IResolvable' type

Error Occurred: With Twitter Bootstrap wizard, the container has been found to

Having trouble with clearInterval in my Angular code

Is it possible to utilize a variable as a column name in MySQL when working with Express?

Encountering a connection refusal error message while executing Selenium-webdriver

Leveraging the spread operator for setting state in a series of consecutive updates

An error occurred while processing the JSReport request

How do I automatically redirect to a different URL after verifying that the user has entered certain words using Javascript?

Unraveling the mystery of nested optional indexes in interfaces

The call stack limit has been exceeded due to the combination of Node, Express, Angular, and Angular-route

Using Regular Expressions in JavaScript for Filtering with Angular.js

Using axios to pass parameters in a URL with the GET method on a localhost server

Obtaining the category value within a slot of the Vuetify calendar

Exploring JSON data for auto-complete suggestions

Optimizing the import and export process for methods in Node.js

How to Retrieve Values from a Movie API?

A solitary outcome yielded by the JSON iteration