Extracting grouped objects into a flattened list

Question

I need to optimize this javascript method because it is a bit slow, I don't want to use the flat() command, as for some reason my angular6 app does not understand the vanilla flat() command, or display some annoying warning messages.

So check the below:

1. my original object
2. my result object desired
3. my slow solution (works, but is slow)

1. my original object:

 const data = [
 {
 "id": 1,
 "name": "Application",
 "groups": [
 {
 "groupName": "",
 "configurations": [
 {
 "id": 17,
 "icon": "access_time",
 "title": "Daily Order Cut-Off Time",
 "description": "Daily Order Cut-Off Time",
 "code": "daily-order-cut-off-time",
 "value": "09:35",
 "valueType": "Time",
 "configurationTypeId": 11,
 "definition": {
 "step": "none"
 },
 "isDefault": false
 }
 ]
 }
 ]
 },
 {
 "id": 3,
 "name": "Processing",
 "groups": [
 {
 "groupName": "",
 "configurations": [
 {
 "id": 1078,
 "icon": "flash_on",
 "title": "Auto Process",
 "description": "Will process all orders that are in the same batch",
 "code": "processing-auto-process",
 "value": "0",
 "valueType": "Boolean",
 "configurationTypeId": 6,
 "definition": null,
 "isDefault": false
 },
 {
 "id": 1074,
 "icon": "subdirectory_arrow_right",
 "title": "Allow Under Picking",
 "description": "Allow under pick when processing order?",
 "code": "processing-allow-under-picks",
 "value": "0",
 "valueType": "Boolean",
 "configurationTypeId": 6,
 "definition": null,
 "isDefault": false
 }
 ]
 }
 ]
 }
 ];

2. object desired:

 [
 {
 "id": 17,
 "code": "daily-order-cut-off-time",
 "value": "09:35"
 },
 {
 "id": 1078,
 "code": "processing-auto-process",
 "value": "0"
 },
 {
 "id": 1074,
 "code": "processing-allow-under-picks",
 "value": "0"
 }
 ]

My slow solution:

const result = data.map(module => module.groups.map(configurations => configurations.configurations.map(config => ({ id: config.id, code: config.code, value: config.value })))).reduce((l,n) => l.concat(n), []).reduce((l2,n2) => l2.concat(n2),[]));

• Oh My Goodness: Is the ES6 spread operator available to you? result = [].concat(...[].concat(...data.map( d => d.groups.map( g => g.configurations.map( c => ({id:c.id, code:c.code, value:c.value}))))))
• Roger: yes it is available.
• Roger: AMAZING! YOUR CODE IS BEAUTIFUL!, please answer my question I will mark as the correct answer!

Answer 1

As commented, the ES6 spread operator flattens like you want. The syntax is a little weird for multiple invocations:

result = [].concat(...[].concat(...data.map( d => d.groups.map( g => g.configurations.map( c => ({id:c.id, code:c.code, value:c.value})))))) 

The arr.flat() method does the same thing more simply. It takes an optional depth argument to indicate how many levels to descend when flattening. In your case, depth is 2.

.flat is a recent feature that may not exist on your platform. Most notably, Node 10 and MS Edge do not have it, while both of those do have the spread operator:

data.map( d => d.groups.map( g => g.configurations.map( c => ({id:c.id, code:c.code, value:c.value})))).flat(2)

• Roger: also, the use of the command .flat() would help somehow in this solution? thanks.
• Oh My Goodness: yes, if you have it. See my edit.