array.map内の複数の要素を返す/ドロップダウンメニュー内のサブカテゴリ

Question

array.mapを使用してネストした配列をループします。 indicatorCategoriesは、名前とID、およびインジケータというネストされた配列を含む最初の配列です。

私はこれらのインジケータを反応ブートストラップのドロップダウンにマッピングしていますが、カテゴリの名前もマッピングする必要があります。

現在、これは私のコードです。

{indicatorCategories.map(indicatorCategory => { 
      return (
       (
       <option 
        disabled 
        key={indicatorCategory.id} 
        value={indicatorCategory.id} 
       > 
        {"---" + indicatorCategory.name + "---"} 
       </option> 
      ), 
       indicatorCategory.indicators.map(indicator => { 
       return (
        <option key={indicator.id} value={indicator.id}> 
        {indicator.name} 
        </option> 
       ); 
       }) 
      ); 
      })} 

その結果、私はインジケータのみをマッピングしているのでインジケータカテゴリは表示されません。 array.mapは要素を戻してネストされた配列にマップすることではないと思いますか？あるいは、私は愚かな構文エラーを作りますか？それはしばらくの間レスリングされているが、葉巻はありません。

可能でない場合、ここではどのような選択肢がありますか？非常にモバイルフレンドリーではないので、そのカテゴリからの指標を表示するために、カテゴリの上にいくつかのホバーを使用しないことを好みます。

ありがとうございました。

Answer 1

reduceとmapの組み合わせで、必要な操作を行うことができます。ここでは、ダミーデータを使用した例を示します。

let data = [ 
    { 
    id: 1, 
    value: 'a', 
    data: [ 
     {id: 11, value: 'b'} 
    ] 
    }, 
    { 
    id: 2, 
    value: 'aa', 
    data: [ 
     {id: 12, value: 'bb'}, 
     {id: 12, value: 'bb'}, 
    ] 
    } 
] 


let results = data.reduce((acc, cur) => { 
    acc = acc.concat(cur.value); 

    return acc.concat(
    cur.data.map((nested) => { 
     return nested.value; 
    }) 
) 
}, []); 

console.log(results) 

https://jsfiddle.net/avLvxsb6/

あなたはすべての配列の値とネストされた配列を持っている結果で見ることができるように。もう1つの方法は、データをマップし、結果をフラット化してネストされた配列を持たないことです。その後、ループしてレンダリングします