abflachen JavaScript-Array von Objekten

Question

I mit hierarchischer Struktur ein Array von Objekt haben, so etwas wie diese:

[ 
    {name: 'ParentOne', children: [ 
     {name: 'ParentOneChildOne'}, 
     {name: 'ParentOneChildTwo', children: [ 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
     ]}, 
    ]}, 
    {name: 'ParentTwo', children: [ 
     {name: 'ParentTwoChildOne', children: [ 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
     ]}, 
     {name: 'ParentTwoChildTwo'} 
    ]} 
]; 

Ich mag es glätten:

[ 
    {name: 'ParentOne'}, 
    {name: 'ParentOneChildOne'}, 
    {name: 'ParentOneChildTwo'}, 
    {name: 'ParentOneChildTwoGrandChildOne'}, 
    {name: 'ParentTwo'}, 
    {name: 'ParentTwoChildOne'}, 
    {name: 'ParentTwoChildOneGrandChildOne'}, 
    {name: 'ParentTwoChildOneGrandChildTwo'}, 
    {name: 'ParentTwoChildTwo'} 
] 

ich versucht habe _.flatten() und _.flatMap(), aber es produziert nicht, was ich brauche. Was ist der beste Weg, um es zu erreichen, vorzugsweise unter Verwendung lodash.js oder underscore.js.

Answer 1

Keine Unterstreichung/lodash.

const arr = [ 
 
    {name: 'ParentOne', children: [ 
 
     {name: 'ParentOneChildOne'}, 
 
     {name: 'ParentOneChildTwo', children: [ 
 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
 
     ]}, 
 
    ]}, 
 
    {name: 'ParentTwo', children: [ 
 
     {name: 'ParentTwoChildOne', children: [ 
 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
 
     ]}, 
 
     {name: 'ParentTwoChildTwo'} 
 
    ]} 
 
]; 
 

 
function flatten(arr) { 
 
    return arr? arr.reduce((result, item) => [ 
 
     ...result, 
 
     { name: item.name }, 
 
     ...flatten(item.children) 
 
    ], []) : []; 
 
} 
 

 
console.log(flatten(arr));

Answer 2

würde ich .reduce und Rekursion, dies zu tun. Hier ist meine Implementierung mit Array.reduce, aber Sie könnten das Gleiche mit der Funktion zum Reduzieren von Unterstrichen tun.

const arr = [ 
 
    {name: 'ParentOne', children: [ 
 
     {name: 'ParentOneChildOne'}, 
 
     {name: 'ParentOneChildTwo', children: [ 
 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
 
     ]}, 
 
    ]}, 
 
    {name: 'ParentTwo', children: [ 
 
     {name: 'ParentTwoChildOne', children: [ 
 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
 
     ]}, 
 
     {name: 'ParentTwoChildTwo'} 
 
    ]} 
 
]; 
 

 
function flatten(arr) { 
 
    return arr.reduce((result, current) => { 
 
     if (current.children) { 
 
     const children = flatten(current.children); 
 
     delete current.children; 
 
     result.push(current); 
 
     result.push(...children); 
 
     } else { 
 
     result.push(current); 
 
     } 
 
     return result; 
 
    }, []) 
 
} 
 

 
console.log(flatten(arr));

Answer 3

Sie könnten versuchen, die flatten Funktion in this answer gegeben Anpassung und verdrehen Sie leicht die Logik Struktur Ihres Objekts.

//Your object 
 
var data = [{ 
 
    name: 'ParentOne', 
 
    children: [{ 
 
     name: 'ParentOneChildOne' 
 
     }, 
 
     { 
 
     name: 'ParentOneChildTwo', 
 
     children: [{ 
 
      name: 'ParentOneChildTwoGrandChildOne' 
 
     }, ] 
 
     }, 
 
    ] 
 
    }, 
 
    { 
 
    name: 'ParentTwo', 
 
    children: [{ 
 
     name: 'ParentTwoChildOne', 
 
     children: [{ 
 
      name: 'ParentTwoChildOneGrandChildOne' 
 
      }, 
 
      { 
 
      name: 'ParentTwoChildOneGrandChildTwo' 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     name: 'ParentTwoChildTwo' 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
//georg's flatten function 
 
flatten = function(x, result, prefix) { 
 
    if (_.isObject(x)) { 
 
    _.each(x, function(v, k) { 
 
     flatten(v, result, prefix ? prefix + '_' + k : k) 
 
    }) 
 
    } else { 
 
    result[prefix] = x 
 
    } 
 
    return result 
 
} 
 

 
//using the function on your data 
 
result = flatten(data, {}); 
 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Hat überhaupt diese Hilfe?

Answer 4

Rekursive Funktionen ist der Weg für jede Tiefe der Iteration.

Mit etwas ES2015 und LoDash/Unders

var arr = [{ 
 
    name: 'ParentOne', 
 
    children: [{ 
 
    name: 'ParentOneChildOne' 
 
    }, { 
 
    name: 'ParentOneChildTwo', 
 
    children: [{ 
 
     name: 'ParentOneChildTwoGrandChildOne' 
 
    }, ] 
 
    }, ] 
 
}, { 
 
    name: 'ParentTwo', 
 
    children: [{ 
 
    name: 'ParentTwoChildOne', 
 
    children: [{ 
 
     name: 'ParentTwoChildOneGrandChildOne' 
 
    }, { 
 
     name: 'ParentTwoChildOneGrandChildTwo' 
 
    }] 
 
    }, { 
 
    name: 'ParentTwoChildTwo' 
 
    }] 
 
}]; 
 

 
var res = _.reduce(arr, (a, b) => { 
 
    (rec = item => { 
 
    _.each(item, (v, k) => (_.isObject(v) ? rec(v) : a.push(_.zipObject([k], [v])))) 
 
    })(b); 
 
    return a; 
 
}, []); 
 

 
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

Answer 5

Sie etwas Zerstörung verwenden könnte und eine rekursive Funktion zum Sammeln alle wollten Gegenstände.

var array = [{ name: 'ParentOne', children: [{ name: 'ParentOneChildOne' }, { name: 'ParentOneChildTwo', children: [{ name: 'ParentOneChildTwoGrandChildOne' },] },] }, { name: 'ParentTwo', children: [{ name: 'ParentTwoChildOne', children: [{ name: 'ParentTwoChildOneGrandChildOne' }, { name: 'ParentTwoChildOneGrandChildTwo' }] }, { name: 'ParentTwoChildTwo' }] }], 
 
    flat = (r, { name, children = [] }) => [...r, { name }, ...children.reduce(flat, []) ], 
 
    result = array.reduce(flat, []); 
 
    
 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Auf EDGE, benötigen Sie eine andere Verwendung von defualt Werte

var array = [{ name: 'ParentOne', children: [{ name: 'ParentOneChildOne' }, { name: 'ParentOneChildTwo', children: [{ name: 'ParentOneChildTwoGrandChildOne' },] },] }, { name: 'ParentTwo', children: [{ name: 'ParentTwoChildOne', children: [{ name: 'ParentTwoChildOneGrandChildOne' }, { name: 'ParentTwoChildOneGrandChildTwo' }] }, { name: 'ParentTwoChildTwo' }] }], 
 
    flat = (r, { name, children }) => [...r, { name }, ...(children || []).reduce(flat, []) ], 
 
    result = array.reduce(flat, []); 
 
    
 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }