ネストされたオブジェクト配列の値を別の配列に取得する

Question

これはthis questionに似ていますが、配列の横にある他のオブジェクトの値が少し変わってしまい、必要なものを得るための正確な構文がわからないようです。

私はこのようなものがあります：

const metadata = [ 
    { 
    stepName: 'Step one', 
    controls: [ 
     {fieldName: 'one', label: 'Field One', type: 'input'}, 
     {fieldName: 'two', label: 'Field Two', type: 'multiline'} 
    ] 
    }, 
    { 
    stepName: 'Step two', 
    controls: [ 
     {fieldName: 'three', label: 'Field Three', type: 'input'}, 
     {fieldName: 'four', label: 'Field Four', type: 'multiline'} 
    ] 
    } 
] 

を...と私は私のようなもので終わるように、そこに独自の配列にフィールド名のすべての値を取得したい：

someFieldArray = ['one', 'two', 'three', 'four'] 

ちょうどあらゆる試みで、私はどこかでチョークを作った。私は繰り返しと分解の組み合わせを使用していますが、正確な構文と組み合わせが正しいとは思えません。私はBabelを使って蒸留したES2015（6）を使用しています。どのようにこれを行うには、任意の助けに感謝です！メタデータをオブジェクトに分解すると、まずオブジェクトが簡単になります（{...メタデータ}）。

Answer 1

あなたはES6のアプローチを求めているので、このソリューションは、あなたが探しているものかもしれません。

[].concat(...metadata.map(item => item.controls.map(obj => obj.fieldName))); 

Answer 2

ES5では、これを書くことができます。

var metadata = [{ stepName: 'Step one', controls: [{ fieldName: 'one', label: 'Field One', type: 'input' }, { fieldName: 'two', label: 'Field Two', type: 'multiline' }] }, { stepName: 'Step two', controls: [{ fieldName: 'three', label: 'Field Three', type: 'input' }, { fieldName: 'four', label: 'Field Four', type: 'multiline' }] }], 
 
    result = metadata.reduce(function (r, a) { 
 
     return r.concat(a.controls.map(function (b) { return b.fieldName; })); 
 
    }, []); 
 

 
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');