Organize objects within an array based on their properties using a map function

Question

Organize objects within an array based on their properties using a map function

My JavaScript code includes an array of objects structured as follows:

const selection = [
        {id: 'P282', areas: ['188']},
        {id: 'P277', areas: []},
        {id: 'P280'},
        {id: 'P281'},
        {id: 'P279'},
        {id: 'U57', areas: ['190', '189', '188']},
      ];

I aim to extract all the areas from each user and store them in a separate array that looks like this:

const extractedAreas = ['188', '190', '189', '188']

This new array may include duplicate elements if present.

javascript arrays

Answer 1

Answer №1

If you want to extract zones from an array, one way to do it is by using the array.reduce() method.

const fetchZones = (arr) => {
    return arr.reduce((accumulator, current) => {
        if (current.zones) {
            return [...accumulator, ...current.zones];
        }
        return accumulator;
    }, []);
}

Answer 2

If you want to extract zones from an array, one way to do it is by using the array.reduce() method.

const fetchZones = (arr) => {
    return arr.reduce((accumulator, current) => {
        if (current.zones) {
            return [...accumulator, ...current.zones];
        }
        return accumulator;
    }, []);
}

Answer 3

Answer №2

Array.reduce offers the optimal solution for your scenario.

const array = [{
    userId: 'P282',
    zones: ['188']
  },
  {
    userId: 'P277',
    zones: []
  },
  {
    userId: 'P280'
  },
  {
    userId: 'P281'
  },
  {
    userId: 'P279'
  },
  {
    userId: 'U57',
    zones: ['190', '189', '188']
  },
];

const result = array.reduce((acc, item) => {
   return acc.concat(item.zones ?? []);
}, []);

console.log(result);

Answer 4

Array.reduce offers the optimal solution for your scenario.

const array = [{
    userId: 'P282',
    zones: ['188']
  },
  {
    userId: 'P277',
    zones: []
  },
  {
    userId: 'P280'
  },
  {
    userId: 'P281'
  },
  {
    userId: 'P279'
  },
  {
    userId: 'U57',
    zones: ['190', '189', '188']
  },
];

const result = array.reduce((acc, item) => {
   return acc.concat(item.zones ?? []);
}, []);

console.log(result);

Answer 5

Answer №3

When you are in the process of learning, it is recommended to implement a straightforward use of the for loop. By utilizing the spread operator (...), you have the ability to disassemble an array into its individual components.

You can achieve optimal results by combining both techniques to obtain the desired zones:

const array = [
        {userId: 'P282', zones: ['188']},
        {userId: 'P277', zones: []},
        {userId: 'P280'},
        {userId: 'P281'},
        {userId: 'P279'},
        {userId: 'U57', zones: ['190', '189', '188']},
      ];
      
      let zones = [];
      for(let i = 0 ; i < array.length;i++){
      if(Array.isArray(array[i].zones))
      zones = [...zones,...array[i].zones];
      
      }
      
      console.log(zones);

Answer 6

When you are in the process of learning, it is recommended to implement a straightforward use of the for loop. By utilizing the spread operator (...), you have the ability to disassemble an array into its individual components.

You can achieve optimal results by combining both techniques to obtain the desired zones:

const array = [
        {userId: 'P282', zones: ['188']},
        {userId: 'P277', zones: []},
        {userId: 'P280'},
        {userId: 'P281'},
        {userId: 'P279'},
        {userId: 'U57', zones: ['190', '189', '188']},
      ];
      
      let zones = [];
      for(let i = 0 ; i < array.length;i++){
      if(Array.isArray(array[i].zones))
      zones = [...zones,...array[i].zones];
      
      }
      
      console.log(zones);

Answer 7

Answer №4

flatMap retrieve zones and place them in a single array.
Eliminate any instances of undefined by using filter(Boolean)

array.flatMap(x=>x.zones) // ['188', undefined, undefined, undefined, '190', '189', '188']
.filter(Boolean); // ['188', '190', '189', '188']

Answer 8

flatMap retrieve zones and place them in a single array.
Eliminate any instances of undefined by using filter(Boolean)

array.flatMap(x=>x.zones) // ['188', undefined, undefined, undefined, '190', '189', '188']
.filter(Boolean); // ['188', '190', '189', '188']

Organize objects within an array based on their properties using a map function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

If an element exists in one of the dimensions of a multi-dimensional array

Unable to get PHP session to function properly in Aurelia framework

Disabling the loading of JavaScript on a Magento website

Issues with JavaScript's getTime() function I am facing problems with

Attempting to alert a particular device using Flutter for notification delivery

A program designed to access and retrieve a universal variable

There is an issue showing up in the console: $(…).datepicker is not defined as a function

Is Jquery "resistant" to updating CSS properties?

Ending asynchronous tasks running concurrently

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

I'm trying to access my navigation bar, but for some reason, it's not allowing me to do so

Converting Arrays into Objects with Multiple Dimensions

Transferring array data into a table

I am interested in incorporating jQuery into my React development project

Is there a way to implement an X icon in Material UI Modals to close them instead of relying on clicking outside the modal?

Why is it that when I add a set of markers from an array list, only the final value is displayed?

Tips on hiding specific table rows in two separate tables based on the chosen option from a dropdown menu

React web app experiencing an issue with MUI Drawer opening flawlessly but failing to close

What is the reason for allowing a char pointer variable to be initialized with a string, while disallowing an int pointer variable to be initialized with an array of integers

The html-duration-picker is not being displayed in the proper format