1つのラベルを持つオブジェクトをループする

Question

いくつかのデータに反応してループしようとしました。私はオブジェクトごとに1つのプロパティ、別の配列しか持たないオブジェクトの配列を持っています。このデータをループしている間、「コイン」と「請求書」のキーをどのように参照できますか？

これは私のコンテナコントローラ

const denominations = [ 
    { 
    coins: [ 
     { name: 'Penny', namePlural: 'Pennies', label: '1¢', value: .01, }, 
     { name: 'Nickel', namePlural: 'Nickels', label: '5¢', value: .05, }, 
     { name: 'Dime', namePlural: 'Dimes', label: '10¢', value: .10, }, 
     { name: 'Quarter', namePlural: 'Quarters', label: '25¢', value: .25, } 
    ] 
    }, 
    { 
    bills: [ 
     { name: 'Dollar', namePlural: 'Dollars', label: '$1', value: 1, }, 
     { name: 'Five', namePlural: 'Fives', label: '$5', value: 5, }, 
     { name: 'Ten', namePlural: 'Tens', label: '$10', value: 10, }, 
     { name: 'Twenty', namePlural: 'Twentys', label: '$20', value: 20, }, 
     { name: 'Fifty', namePlural: 'Fiftys', label: '$50', value: 50, }, 
     { name: 'Hundred', namePlural: 'Hundreds', label: '$100', value: 100, } 
    ] 
    } 
]; 

これはダムコントローラ内部にあるから来ています。

let denoms = props.denominations.map(function (denom) { 
    return (
     <div className="col" key={denom}>test</div> 
    ) 
}); 

私はfunction (value, key)の構文に慣れています。どのようにして 'コイン'と '請求書'のキーを抽出できますか？

Answer 1

Object.keysメソッドを使用してオブジェクトのキーを取得し、返された配列でマップを再度使用できます。

let denoms = props.denominations.map(function (denom) { 
    return (
    Object.keys(denom).map(function(key){ 
     return (<div className="col" key={key}>test</div>) 
    }) 
); 
}); 

値を取得したい場合は、このような値にアクセスできます。

denom[key] 

編集：

あなたは、各キー内のすべてのオブジェクトをループにしたい場合は、次のようにあなたがもう一度あなたの価値を持つマップを使用することができます。

let denoms = props.denominations.map(function (denom) { 
    return (
    Object.keys(denom).map(function(key){ 
     return denom[key].map(function(item){ 
     return (<div className="col" key={item}>{item.name}</div>) 
     }) 
    }) 
); 
}); 

あなたがキー

let denoms = props.denominations.map(function (denom) { 
    return (
    Object.values(denom).map(function(value){ 
     return value.map(function(item){ 
     return (<div className="col" key={item}>{item.name}</div>) 
     }) 
    }) 
); 
});