How do I avoid nested maps to get the values I need from nested arrays?

Question

I am doing something like this to get the values I need:

   tableRowsItems = data.softy.map(row =>
      row.items.map(item => console.log('item', item)),
    );

With that, I get something like in the picture below which is exactly what I need

My question is if that is the proper ES6 way to do it. I am also using lodash if that helps.

This is how the json file looks without the map:

[
 {
  "ticketId": 67973802,
  "account": null,
  "items": [
    {
      "id": 11705294,
      "billingItemId": 361643044,
      "cancellationRequestId": 17289674,
      "immediateCancellationFlag": true,
      "scheduledCancellationDate": null,
      "serviceReclaimStatusCode": "COMPLETE",
      "billingItem": {
        "description": "Storage as a Service",
        "recurringFee": 0,
        "id": 361643044
      }
    }
  ]
 },
 ...
]
...

What I need is what you see on items key

so you're trying to get all `items` from each `ticket` into a single array? — Dacre Denny, Nov 28 '18 at 00:56
It's not the right way, because you aren't `return`ing anything significant from either `.map` - use `forEach` instead, for generic iteration + side effects — CertainPerformance, Nov 28 '18 at 00:57

Akrion · Accepted Answer · 2018-11-28T02:06:09.633

Using ES6 you can easily do one line function to help you flatten the nested array by the items property via Array.reduce:

var tickets = [{ "ticketId": 67973802, "account": null, "items": [{ "id": 117052912, "billingItemId": 36164304123, }, { "id": 11705232, "billingItemId": 361643044, }] }, { "ticketId": 67973802, "account": null, "items": [{ "id": 117052945, "billingItemId": 361643046, }, { "id": 117052953, "billingItemId": 361643049, }] } ];
 
const pullBy = (arr, prop) => arr.reduce((r,c) => [...r[prop], ...c[prop]])
 
console.log(pullBy(tickets, 'items'))

Using lodash the best option is flatMap:

var tickets = [{ "ticketId": 67973802, "account": null, "items": [{ "id": 117052912, "billingItemId": 36164304123, }, { "id": 11705232, "billingItemId": 361643044, }] }, { "ticketId": 67973802, "account": null, "items": [{ "id": 117052945, "billingItemId": 361643046, }, { "id": 117052953, "billingItemId": 361643049, }] } ];
 
const result = _.flatMap(tickets, 'items')
 
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

score 2 · Answer 2 · answered Nov 28 '18 at 01:00

If I understand your question correctly, you're trying to extract all nested items from your array of ticket objects - in which case you can achieve this by mapping the input tickets to an array of items arrays, and then flatten the result to squish that down to a flat a array of item objects like so:

var output = input
.map(ticket => ticket.items) // Map each ticket to array of ticket items
.flat(); // Reduce array of item arrays to combined array of items

var input = [
{
  "ticketId": 67973802,
  "account": null,
  "items": [
    {
      "id": 11705294,
      "billingItemId": 361643044,
      "cancellationRequestId": 17289674,
      "immediateCancellationFlag": true,
      "scheduledCancellationDate": null,
      "serviceReclaimStatusCode": "COMPLETE",
      "billingItem": {
        "description": "Storage as a Service",
        "recurringFee": 0,
        "id": 361643044
      }
    }
  ]
 },
 {
  "ticketId": 67973802,
  "account": null,
  "items": [
    {
      "id": 11705294,
      "billingItemId": 361643044,
      "cancellationRequestId": 17289674,
      "immediateCancellationFlag": true,
      "scheduledCancellationDate": null,
      "serviceReclaimStatusCode": "COMPLETE",
      "billingItem": {
        "description": "Storage as a Service",
        "recurringFee": 0,
        "id": 361643044
      }
    }
  ]
 }
 ];
 
 var output = input.map(ticket => ticket.items).flat();
 
 console.log(output);

Just a note that [`Array.flat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#Browser_compatibility) is an experimental feature and is not supported very well yet. If this is to be run within a web browser, you might want to [explore alternatives](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript). — Jeto, Nov 28 '18 at 01:11
For those of you coming here in 2022, `Array.flat` has pretty solid compatibility with all major browsers except IE https://caniuse.com/array-flat — Nunchuk, Jan 31 '22 at 06:58

slider · Answer 3 · 2018-11-28T01:14:36.350

Lodash has flatMap (the native JS version is not yet supported on all browsers) and you can use it as:

var items = _.flatMap(tickets, t => t.items);

to get all items from all tickets in a single 1-d array:

var tickets = [{
    "ticketId": 67973802,
    "account": null,
    "items": [{
      "id": 117052912,
      "billingItemId": 36164304123,
    }, {
      "id": 11705232,
      "billingItemId": 361643044,
    }]
  },
  {
    "ticketId": 67973802,
    "account": null,
    "items": [{
      "id": 117052945,
      "billingItemId": 361643046,
    }, {
      "id": 117052953,
      "billingItemId": 361643049,
    }]
  }
];

var items = _.flatMap(tickets, t => t.items);
console.log(items);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

score 2 · Answer 4 · answered Nov 28 '18 at 11:20

2

Above answers will help you to achieve the goal but we use .map when we want to return something from the looping, otherwise you should use forEach.

I know it is really irrelevent to given questions but still. wanted to put it into the thread.

answered Nov 28 '18 at 11:20

Akash Bhandwalkar

901
5
19

How do I avoid nested maps to get the values I need from nested arrays?

4 Answers4