オブジェクト

Question

私は、階層構造を持つオブジェクトの配列を持って、このような何かのjavascript配列フラット化：

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

私はそれを平らにしたい：私は_.flatten()と_.flatMap()を試してみました

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

を、しかし、それは私が必要なものを生み出すものではありません。 lodash.jsまたはアンダースコア.jsを使用することをお勧めします。

Answer 1

アンダースコア/ロダッシュは不要です。

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

私はこれを行うには.reduceと再帰を使用します。 Array.reduceを使って実装しましたが、アンダースコアのreduce関数でも同じことができます。

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

あなたはthis answerに与えられたflatten機能を適応してみてください、と少しあなたのオブジェクトの構造にロジックをねじることができます。

//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>

すべてでこのヘルプをしていますか？

Answer 4

再帰関数は、繰り返しの深さに行く方法です。あなたは、いくつかの破壊を使用して収集するための再帰関数を使用することができます

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

一部ES2015とLoDash /アンダースコアで

は、すべての項目を望んでいました。 EDGEで

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; }

、あなたはdefualt値

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; }

の異なる使用を必要とします