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

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

• javascript
• arrays
• ecmascript-6
• lodash

• so you're trying to get all items from each ticket into a single array? – Dacre Denny Commented Nov 28, 2018 at 0:56
• 1 It's not the right way, because you aren't returning anything significant from either .map - use forEach instead, for generic iteration + side effects – CertainPerformance Commented Nov 28, 2018 at 0:57

4 Answers 4

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./ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

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 bined 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);

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./ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

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.