Array of objects with nested array of objects

Question

i've got the following array of objects

let prova: ActiveRoute[] = [
{
    path: '/Root',
    method: 'GET',
    children: [
        {
            path: '/Son',
            method: 'GET',
            children: [
                {
                    path: '/Grandson',
                    method: 'GET',
                    children: [
                        {
                            path: '/Boh',
                            method: 'GET',
                            activeMessage: 'End',
                        }
                    ],
                }
            ],
        }
    ],
    middleware: [
        'middleware1',
    ],
}

This is the ActiveRoute interface

export interface  ActiveRoute {
   path: string;
   children?: ActiveRoute[];
   middleware?: string[];
   method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
   activeMessage?: string;

}

I want to print all the path properties in a string. What should i do?

This is what i've done (wrong)

function getEndPoints(prova) {
let endpoints: string = '';
prova.forEach((r) => {
    if (r.path) {
        endpoints += r.path;
        if(r.children){
            r.children.forEach((s) => {
                if (s.path) {
                    endpoints += s.path;
                }
                if (s.children){
                    s.children.forEach((z) =>{
                        if (z.path){
                            endpoints += z.path;
                        }
                    });
                }
            });
        }
    }
});
console.log(endpoints);

}

I really don't understand how should i loop continuously and deeply within an array of objects. This is my desire output, in this case: '/Root/Son/Grandson/Boh'.

Obviously now i don't how i'll go deep within.

StackOverflow isn't here to do your work for you. Show us what you have tried so far. We'll gladly help you. — Zenoo
– Zenoo, Commented Feb 2, 2018 at 15:26
While you are adding things, add the desired output from the collection you've entered. — random_user_name
– random_user_name, Commented Feb 2, 2018 at 15:30
desire output: /Root/Son/Grandson/Boh What if you have multiple children on any of the levels?. — Keith
– Keith, Commented Feb 2, 2018 at 15:35

Keith · Accepted Answer · 2018-02-02 16:29:05Z

1

Your input structure could have multiple results,..

eg. below I've modified so that /Grandson has multiple children.

let prova = [
{
    path: '/Root',
    method: 'GET',
    children: [
        {
            path: '/Son',
            method: 'GET',
            children: [
                {
                    path: '/Grandson',
                    method: 'GET',
                    children: [
                        {
                            path: '/Boh',
                            method: 'GET',
                            activeMessage: 'End',
                        },
                        {
                            path: '/AnotherBoh',
                            method: 'GET',
                            activeMessage: 'End',
                        }
                    ],
                }
            ],
        }
    ],
    middleware: [
        'middleware1',
    ]
}];

function getLinks(p) {
  const arr = [];
  function inner(p, root) {
    p.forEach((x) => {
      const newroot = root + x.path;
      if (!x.children) {
        arr.push(newroot);
      } else {
        inner(x.children, newroot);
      }
    });
  }
  inner(p, "");
  return arr;
}

console.log(getLinks(prova));

edited Feb 2, 2018 at 16:29

answered Feb 2, 2018 at 15:46

Keith

24.4k2 gold badges32 silver badges48 bronze badges

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

2 Comments

user7272904 Over a year ago

Thank you for your answer, i didn't think about recursion

Scott Sauyet Over a year ago

Recursion should leap to your mind when you see a structure like this. It's really the only technique that will do.

Scott Sauyet · Accepted Answer · 2018-02-02 17:05:57Z

0

Here's another possibility, based on @Keith's answer, but which returns the list of paths as an array of strings rather than logging them.

let prova = [{
    path: '/Root',
    children: [{
        path: '/Son',
        children: [{
            path: '/Grandson',
            children: [{
                path: '/Boh',
            }, {
                path: '/AnotherBoh',
                children: [{
                   path: '/Foo'
                }, {
                  path: '/Bar'
                }]
            }]
        }]
    }, {
        path: '/AnotherSon',
    }],
    middleware: ['middleware1']
}];

function getPaths(p, base = "", gather = []) {
  return p.map((node) => {
    if (node.children) {
      getPaths(node.children, base + node.path, gather);
    } else {
      gather.push(base + node.path);
    }
    return gather
  }).reduce((a, b) => a.concat(b), []); // removes an (unnecessary?) level of nesting
}

console.log(getPaths(prova));

Note that I removed a number of irrelevant properties, but added nesting at several levels, just to test.

Update

Here's a cleaner version of the same idea:

const flat = arr => arr.reduce((out, item) => out.concat(item), [])

const getPaths = (p, base = "", gather = []) => flat(p.map((node) => ('children' in node) 
    ? getPaths(node.children, base + node.path, gather)
    : gather.concat(base + node.path)
))

edited Feb 2, 2018 at 17:05

answered Feb 2, 2018 at 16:20

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

2 Comments

Keith Over a year ago

but which returns the list of paths Good point, I've altered mine to return an array too, as in real life would be much more useful.

Scott Sauyet Over a year ago

Yes, it looks as though ours our quite similar now. I think I like your inner function better than my gather parameter and final flattening step. But I definitely prefer a map to a forEach.

Collectives™ on Stack Overflow

Array of objects with nested array of objects

2 Answers 2

2 Comments

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related