マップとES6の矢印機能を使用してOptgroupでオプションを生成

Question

私はReactで働いていますが、私はドロップダウンコンポーネントのオプションを生成しようとしている次のデータ構造を持っています。マップとES6矢印機能を使用した3組のチームメンバー。

"teams": [ 
    { 
     "Group A": 
      [ 
       { "id": "A1", "name": "John" }, 
       { "id": "A2", "name": "Erin" }, 
       { "id": "A3", "name": "Steve" } 
      ], 
     "Group B": 
      [ 
       { "id": "B1", "name": "Mark" }, 
       { "id": "B2", "name": "Doug" }, 
       { "id": "B3", "name": "Sam" }, 
       { "id": "B4", "name": "Kate" } 
      ], 
     "Group C": 
      [ 
       { "id": "C1", "name": "Michelle" }, 
       { "id": "C2", "name": "April" }, 
       { "id": "C3", "name": "Mike" }, 
       { "id": "C4", "name": "Albert" } 
      ] 
    } 
] 

JSONが、私はこの構文を使用していた、チーム・グループで入れ子になった前に：

let teamOptions = this.props.firm.teams.map(memb => <Option key={memb.id}>{memb.name}</Option>); 

今、私はグループにチームメンバーを入れ子になったので、私はされていませんこれを処理する正しい方法を理解することができます。

私は、出力が似ているしたいと思います：

<OptGroup label="Group A"> 
    <Option value="A1">John</Option> 
    <Option value="A2">Erin</Option> 
    <Option value="A3">Erin</Option> 
</OptGroup> 
<OptGroup label="Group B"> 
    <Option value="B1">Mark</Option> 
    <Option value="B2">Doug</Option> 
    <Option value="B3">Sam</Option> 
    <Option value="B4">Kate</Option> 
</OptGroup> 
<OptGroup label="Group C"> 
    <Option value="C1">Michelle</Option> 
    <Option value="C2">April</Option> 
    <Option value="C3">Mike</Option> 
    <Option value="C4">Albert</Option> 
</OptGroup> 

Answer 1

このような形式とは対照的に、あなたはあなたの例の配列に提供構造は、1つのオブジェクトを持っており@Bergiは、その少し不明瞭に言及したよう：

"teams": [ 
    { 
    "name": "Group A", 
    "players": [ 
     { "id": "A1", "name": "John" }, 
     { "id": "A2", "name": "Erin" }, 
     { "id": "A3", "name": "Steve" } 
    ] 
    }, 
    { 
    "name": "Group B", 
    "players": [ 
     { "id": "B1", "name": "Mark" }, 
     { "id": "B2", "name": "Doug" }, 
     { "id": "B3", "name": "Sam" }, 
     { "id": "B4", "name": "Kate" } 
    ] 
    }, 
] 

関係なく、その上にマッピングする方法についてのご質問に答えるために、私はこのようにそれを行うだろう：あなたの配列は、私はあなたのチームの配列内の最初の項目をつかみ、その後、反復しています一つのオブジェクトを持っていることに注意してくださいキー/値の上にあなたが最初のオブジェクトの上に反復することを考えると、これは私はそれを行うだろうかです：

const keys = Object.keys(this.props.firm.teams[0]); 
const values = Object.values(this.props.firm.teams[0]); 

const teamOptions = values.map((group, i) => { 
    <OptGroup label={keys[i]} /> 
    { group.map(player => <Option value={player.id}>{player.name}</Option>) } 
    </OptGroup> 
});