Group of objects containing an inner group of objects

Question

Group of objects containing an inner group of objects

Here is an array of objects that I am working with:

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',
    ],
}

Defined ActiveRoute interface:

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

I am attempting to extract and print all the 'path' properties in a single string.

This is what I have tried, but it is not giving me the desired output:

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 am struggling to figure out how to loop through an array of objects deeply and continuously. Desired output in this case: '/Root/Son/Grandson/Boh'.

Currently, I am unsure of how to navigate deeply within the array of objects.

javascript arrays typescript object

Answer 1

Answer №1

There is a possibility for your input structure to yield multiple results...

For example, I have made modifications below to demonstrate that /Grandson now 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));

Answer 2

There is a possibility for your input structure to yield multiple results...

For example, I have made modifications below to demonstrate that /Grandson now 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));

Answer 3

Answer №2

Here is an alternative approach inspired by @Keith's response. This method returns the list of paths as an array of strings instead of simply logging them.

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

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

console.log(retrievePaths(sample));

Please note that some properties have been removed for brevity, while nesting has been added at various levels for testing purposes.

Update

Here's a more concise version of the same concept:

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

const retrievePaths = (nodes, base = "", collection = []) => flat(nodes.map((node) => ('children' in node) 
    ? retrievePaths(node.children, base + node.path, collection)
    : collection.concat(base + node.path)
))

Answer 4

Here is an alternative approach inspired by @Keith's response. This method returns the list of paths as an array of strings instead of simply logging them.

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

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

console.log(retrievePaths(sample));

Please note that some properties have been removed for brevity, while nesting has been added at various levels for testing purposes.

Update

Here's a more concise version of the same concept:

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

const retrievePaths = (nodes, base = "", collection = []) => flat(nodes.map((node) => ('children' in node) 
    ? retrievePaths(node.children, base + node.path, collection)
    : collection.concat(base + node.path)
))

Group of objects containing an inner group of objects

Answer №1

Answer №2

Update

Similar questions

Using a combination of nested fetch() and array.map() does not allow for the return

How can we achieve the same functionality as React Native's { flex: 1 } in React JS?

How can I stop and hover over time in AngularJs Interval?

Utilizing JSTL: Executing a function within <script> through the c:set tag in JSTL

iterate through the elements in the array

`Is there a way to repurpose generic type?`

Selecting options using AngularJS to parse through a list

I am unable to find any resolution, so to speak

Issue with ng-true-value in AngularJS version 1.6.1 - not functioning as expected

Monitoring Unread Message Totals in Twilio Chat

Sharing the state of a button group across different tabs using Bootstrap 5 and JQuery (or pure JavaScript): A complete guide!

Utilize nested object models as parameters in TypeScript requests

Is it possible to have the Save Success Alert fade out only once?

Textures have been added by the user in the three.js platform

What steps can I take to prevent a JavaScript element from clearing everything when clicked?

Experiencing issues with the redirect button on the navigation bar of my website

Implementing Angular checkbox repetition controlled from an external controller

What is the best way to make the sidebar occupy the entire space?

Is there a way to verify the existence of a specific error in the console?

Discovering the quantity of identical elements within a JavaScript array