How to access, merge and collect array values within a nested data structure by different criteria?

I have below array of objects. As you can see, i have 2 runTypes named VEGGIES and FRUITS. Each runType will have a list of verticals to it. For e.g. VEGGIES has SPINACH, TOMATO, ONION and FRUITS has APPLE, BANANA, GRAPES

let data = [
  {
    "runType": "VEGGIES",
    "verticals": [
      { 
        "vertical": "SPINACH",
        "radars": {}
      },
      {
        "vertical": "TOMATO",
        "radars": {}
      },
      {
        "vertical": "ONION",
        "radars": {}
      },
    ],
    "total_count": {}
  },
  {
    "runType": "FRUITS",
    "verticals": [
      {
        "vertical": "APPLE",
        "radars": {
           
         }
      },
      {
        "vertical": "BANANA",
        "radars": {}
      },
      {
        "vertical": "GRAPES",
        "radars": {
          "P5": 8
        }
      }
    ],
    "total_count": {
      "P5": 8
    }
  }
]

In my case, i want to extract these vertical values and put them in an array. In case of regular array of objects, we can achieve the above task by using this code.

let result = data.map(({ verticals }) => vertical)

But my code has array of objects inside an array of object. Can someone please let me know how to achieve these 3 scenarios

1. Scenario 1- Get all the verticals for both runType. Result should be [SPINACH, TOMATO, ONION, APPLE, BANANA, GRAPES]
2. Scenario 2- get all verticals for runType = ‘VEGGIES’. Result should be [SPINACH, TOMATO, ONION]
3. Scenario 3- get all verticals for runType = ‘FRUITS’. Result should be [APPLE, BANANA, GRAPES]

Can someone pls shed some light on this particular data.

Answer

In addition to map the OP also might have a look into flatMap and find … reduce is also worth a try …

let data = [{
  "runType": "VEGGIES",
  "verticals": [{ 
    "vertical": "SPINACH",
    "radars": {},
  }, {
    "vertical": "TOMATO",
    "radars": {},
  }, {
    "vertical": "ONION",
    "radars": {},
  }],
  "total_count": {},
}, {
  "runType": "FRUITS",
  "verticals": [{
    "vertical": "APPLE",
    "radars": {},
  }, {
    "vertical": "BANANA",
    "radars": {},
  }, {
    "vertical": "GRAPES",
    "radars": {
      "P5": 8,
    },
  }],
  "total_count": {
    "P5": 8,
  },
}];

// Scenario 1
// - Get all the verticals for both runType.
//   - Result should be [SPINACH, TOMATO, ONION, APPLE, BANANA, GRAPES]
console.log('Scenario 1 ... ', data

  .flatMap(({ verticals }) =>
    verticals.map(({ vertical }) => vertical)
  )
);

// Scenario 2
// - get all verticals for runType = 'VEGGIES'.
//   - Result should be [SPINACH, TOMATO, ONION]
console.log('Scenario 2 ... ', data

  .find(item => item.runType === 'VEGGIES')
  .verticals.map(({ vertical }) => vertical)
);

// Scenario 3
// - get all verticals for runType = 'FRUITS'.
//   - Result should be [APPLE, BANANA, GRAPES]
console.log('Scenario 3 ... ', data

  .find(item => item.runType === 'FRUITS')
  .verticals.map(({ vertical }) => vertical)
);


// Bonus
// - based on Array#reduce one can achieve everything at once

function groupMergeAndCollectVerticals(collector, item) {
  const { index, list } = collector;
  const { runType, verticals } = item;

  const group = (index[runType] ??= []);
  const verticalList = verticals.map(({ vertical }) => vertical);

  group.push(...verticalList);
  list.push(...verticalList);

  return collector;
}
const verticalsCollection =
  data.reduce(groupMergeAndCollectVerticals, { index: {}, list: [] });

console.log(
  'reduce based :: all at once ... ',
  verticalsCollection
);
console.log(
  'reduce based :: Scenario 1 ... ',
  verticalsCollection.list
);
console.log(
  'reduce based :: Scenario 2 ... ',
  verticalsCollection.index['VEGGIES']
);
console.log(
  'reduce based :: Scenario 3 ... ',
  verticalsCollection.index['FRUITS']
);

.as-console-wrapper { min-height: 100%!important; top: 0; }