Search code examples
javascriptarraysjavascript-objects

Plucking objects from multi-dimensional array


Say we have the following array:

const admins = [
      {
        adminName: 'admin 1',
        devices: [
          {
            deviceName: 'device 1',
            os: 'desktop',
            appVersion: 1.2.0
          },
          {
            deviceName: 'device 2',
            os: 'desktop',
            appVersion: 1.4.0
          }
        ]
      },
      {
        adminName: 'admin 2',
        devices: [
          {
            deviceName: 'device 1',
            os: 'ios',
            appVersion: 1.4.0
          },
          {
            deviceName: 'device 2',
            os: 'android',
            appVersion: 1.1.0
          }
        ]
      }
    ]

I'm attempting to gather all the devices from various admins into a single array like so.

const adminDevices = admins.map(admin => admin.devices);

But this returns an array that has another array in it which contains the devices.

I have tried the following:

const adminDevices = admins.map((admin) => {
   return admin.devices.reduce((accumulator, value) => {
     return value;
   }, {});
});

But this as expected only returns the first device value. Any suggestions on how I could accomplish this with any of the Array methods without having to declare an empty array or set and fill that out manually?


Solution

  • Use .flatMap:

    const admins = [
      {
        adminName: 'admin 1',
        devices: [
          { deviceName: 'device 1', os: 'desktop', appVersion: '1.2.0' },
          { deviceName: 'device 2', os: 'desktop', appVersion: '1.4.0' }
        ]
      },
      {
        adminName: 'admin 2',
        devices: [
          { deviceName: 'device 1', os: 'ios', appVersion: '1.4.0' },
          { deviceName: 'device 2', os: 'android', appVersion: '1.1.0' }
        ]
      }
    ];
    
    const adminDevices = admins.flatMap(admin => admin.devices);
    
    console.log(adminDevices)