JavaScript 对象 - 我在访问嵌套多个级别的对象属性数组并将它们组合在一起时遇到问题

Question

I have an array of objects & those objects contain a property called children which are also objects & they repeat them multiple levels deep(or not).

Basically, I need to accomplish two things :

• Get the first level path property's value & its multiple level within the children property.

• Concatenating them together to get single string which will be a route/URL.

For example, following the sample code below, I'll need to get three differents URLs/routes like so:

/system-settings1/accounting1/accounting1/etc

/system-settings2/accounting2/accounting2/etc

/system-settings3/accounting3/accounting3/etc

This is small sample of my object :

const routes = [
  {
    path: '/system-settings1',
    name: 'global-settings1',
    component: 'tabs1',
    children: {
      path: 'accounting1',
      name: 'local-settings1',
      components: 'modals1',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings2',
    name: 'global-settings2',
    component: 'tabs2',
    children: {
      path: 'accounting2',
      name: 'local-settings2',
      components: 'modals2',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings3',
    name: 'global-settings3',
    component: 'tabs3',
    children: {
      path: 'accounting3',
      name: 'local-settings3',
      components: 'modals3',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
]

I was able to get the parent's path & its next immediate children's path like so:

const routeParentPaths = routes.map(({path}) => path);

const routeChildrenPaths = routes.map(({children}) => children.path);

console.log((routeParentPaths.concat(routeChildrenPaths)));

But I need to find a way to access all its children's paths plus I need to find a way to concatenate in order together to form a proper URL per each object .

You find a code sample here .

Answer 1

You could create a recursive function which takes an object as parameter. Destructure the parameter to get path and children property. If the nested object doesn't have children , return just path . Else, recursively call the function on children and append it to the current path

Then, call this function on each item in the routes array using map

const getPath = ({ path, children }) => children ? `${path}/${getPath(children)}` : path

const output = routes.map(getPath)

Here's a snippet:

 const routes=[{path:"/system-settings1",name:"global-settings1",component:"tabs1",children:{path:"accounting1",name:"local-settings1",components:"modals1",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},{path:"/system-settings2",name:"global-settings2",component:"tabs2",children:{path:"accounting2",name:"local-settings2",components:"modals2",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},{path:"/system-settings3",name:"global-settings3",component:"tabs3",children:{path:"accounting3",name:"local-settings3",components:"modals3",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},], getPath = ({ path, children }) => children ? `${path}/${getPath(children)}` : path, output = routes.map(getPath) console.log(output)

Answer 2

So you can simply keep checking if the children key exists and update the object you are checking against. This can get as nested as you would like. I updated one of your routes to allow this to be shown more easily.

Basically

 const routes = [ { path: '/system-settings1', name: 'global-settings1', component: 'tabs1', children: { path: 'CHILD1accounting1', name: 'local-settings1', components: 'modals1', children: { path: 'CHILD2accounting1', name: 'local-settings1', components: 'modals1' // more children deeply nested(or not) } } }, { path: '/system-settings2', name: 'global-settings2', component: 'tabs2', children: { path: 'accounting2', name: 'local-settings2', components: 'modals2', children: { path: 'accounting1', name: 'local-settings1', components: 'modals1' // more children deeply nested(or not) } } }, { path: '/system-settings3', name: 'global-settings3', component: 'tabs3', children: { path: 'accounting3', name: 'local-settings3', components: 'modals3', children: { path: 'accounting1', name: 'local-settings1', components: 'modals1' // more children deeply nested(or not) } } }, ] let x = routes.map(route => { let path = route.path + "/"; while(route.hasOwnProperty('children')) { route = route.children; path += `${route.path}/` } return path; }); console.log(x);

Answer 3

Iterate the routes array with Array.map() , and use a do...while loop to construct a url from a nested object.

 const getUrl = route => { let r = route let url = [] do { url.push(r.path) } while(r = r.children) return url.join('/') } const getUrls = routes => routes.map(getUrl) const routes = [{"path":"/system-settings1","name":"global-settings1","component":"tabs1","children":{"path":"accounting1","name":"local-settings1","components":"modals1","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings2","name":"global-settings2","component":"tabs2","children":{"path":"accounting2","name":"local-settings2","components":"modals2","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings3","name":"global-settings3","component":"tabs3","children":{"path":"accounting3","name":"local-settings3","components":"modals3","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}}] const result = getUrls(routes) console.log(result)

Answer 4

You can create recursive function that will receive data object and previous path and if the object has children call it again.

 const routes = [{"path":"/system-settings1","name":"global-settings1","component":"tabs1","children":{"path":"accounting1","name":"local-settings1","components":"modals1","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings2","name":"global-settings2","component":"tabs2","children":{"path":"accounting2","name":"local-settings2","components":"modals2","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings3","name":"global-settings3","component":"tabs3","children":{"path":"accounting3","name":"local-settings3","components":"modals3","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}}] function toPaths(data, prev = '') { const result = [] function build(obj, prev = '') { prev += (prev ? '/' : '') + obj.path; if (obj.children) build(obj.children, prev) else result.push(prev) } data.forEach(e => build(e)); return result; } const paths = toPaths(routes) console.log(paths)