Reduce level of nested object array in Typescript/JS

Question

I'm learning TypeScript and Angular and I'm struggling with a problem. Say, I have an array of Application objects. Each Application object has this kind of a nested structure:

Application
|
----[Document Type]
---------|
--------------[Document]
------------------|
------------------------Metadata

(Each Application has an array of Document Type. Each Document Type has an array of Document. Each Document has a Metadata inside it)

Example:

[
 {
  "name": "Application 1",
  "parent_type": "root",
  "children": [
   {
    "name": "Operations Manual",
    "parent": "Application 1",
    "parent_type": "application",
    "count": 2,
    "children": [
     {
      "name": "App1-OpManual-1",
      "metadata": {
       "actualDocName": "operations1-app1",
       "currentStatus": "for review",
       "lastModifiedBy": "user 1",
       "size": 56,
       "fileExtension": "docx"
      }
     },
     {
      "name": "App1-OpManual-2",
      "metadata": {
       "actualDocName": "operations2-app1",
       "currentStatus": "for review",
       "lastModifiedBy": "user 2",
       "size": 56,
       "fileExtension": "pdf"
      }
     }
    ]
   }
  ]
 }
]

I'm trying to reduce this array to this (basically, to retain the nesting only till level 2 and discard the rest):

Application
|
----[Document Type]

..so that, the JSON becomes like this:

[
 {
  "name": "Application 1",
  "parent_type": "root",
  "children": [
   {
    "name": "Operations Manual",
    "parent": "Application 1",
    "parent_type": "application",
    "count": 2
   }
  ]
 }
]

I've been trying with multiple examples from tutorials, but haven't been able to get the correct JS to do this. Can anybody please help?

I've been trying show what you've tried, perhaps it's a simple mistake you've made in your attempt - you'll learn more from having your mistake corrected rather than having the code written for you with no apparent attempt by you — Bravo
– Bravo, Commented Oct 27, 2019 at 7:23

Nick Parsons · Accepted Answer · 2019-10-27 07:31:03Z

2

You could use .map() and destructuring to grab the properties and values you need from your outer-most objects within your array, and then use .map() again with destructuring to get the properties you need fro your inner-most object to map each application object in your array to a newly created minified version of itself:

const arr = [{name:"Application 1",parent_type:"root",children:[{name:"Operations Manual",parent:"Application 1",parent_type:"application",count:2,children:[{name:"App1-OpManual-1",metadata:{actualDocName:"operations1-app1",currentStatus:"for review",lastModifiedBy:"user 1",size:56,fileExtension:"docx"}},{name:"App1-OpManual-2",metadata:{actualDocName:"operations2-app1",currentStatus:"for review",lastModifiedBy:"user 2",size:56,fileExtension:"pdf"}}]}]}];

const res = arr.map(({children, ...r}) => (
    {
      ...r,
      children: children.map(({children, ...keep}) => ({...keep}))
    }
  ));

console.log(res);

edited Oct 27, 2019 at 7:31

answered Oct 27, 2019 at 7:25

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tatha Over a year ago

This worked like a charm. Thanks a lot. While I'm learning the ABC's of TypeScript and JS and yet to reach this destructuring concept, I'm trying to understand how this works. After I posted the question, I thought I should have mentioned the condition based on which I need to discard children (parent_type == 'application'). But I see its not necessary at all. I think, that we did the nested map() operations twice, that itself achieved the navigation till level 2. Isn't it?

Nick Parsons Over a year ago

@Tatha yes, that's right. The nested map assumes that the outer object (ie the parent_type) is the application, so we don't need to check that

Collectives™ on Stack Overflow

Reduce level of nested object array in Typescript/JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related