Reactでjsonオブジェクトの配列を動的に反復する

Question

jsonオブジェクトの配列を返すapi呼び出しを実行しています。ここで私が返されることを期待できるものの一例である：

[ 
    {"id": 1, "name": "Pete", "age": 22}, 
    {"id": 2, "name": "Sarah", "age": 32}, 
    {"id": 3, "name": "Marshall", "age": 33} 
] 

私はせずに、動的属性として各JSONオブジェクト内の各キーを割り当てながら、テーブルの行を作成するために、このオブジェクトをループにしようとしていますキーを明示的に述べる。例えば、私は次のような構造には、このオブジェクトをレンダリングしたいと思います：私のレガシーコードは次のようになります

<tr key=1> 
    <td>Pete</td> 
    <td>22</td> 
</tr> 
<tr key=2> 
    <td>Sarah</td> 
    <td>32</td> 
</tr> 
<tr key=3> 
    <td>Marshall</td> 
    <td>33</td> 
</tr> 

：レガシーコードのこの部分で

var MyMembers= this.props.Members.map((Member) => { 
    return (
    <tr key={Member.id}> 
     <td>{Member.name}</td> 
     <td>{Member.age}</td> 
    </tr> 
) 
}); 

しかし私は、明示的に「名前を呼んでいます'および' age '属性を使用して' td 'タグを作成します。キー名を明示的に呼び出さなくても、各オブジェクトをループして、そのオブジェクトの各キーの 'td'値を作成する方法はありますか？

Answer 1

これは動作するはずです：

var MyMembers= this.props.Members.map((Member) => { 
    var keys = Object.keys(Member) 
    var index = keys.indexOf("id"); 
    if (index > -1) { 
    // removes the "id" element from the keys. 
    keys.splice(index, 1); 
    } 
    var divs = keys.map(k => <td>{Member[k]}</td>) 
    return (
    <tr key={Member.id}> 
    divs 
    </tr> 
) 
}); 

Answer 2

あなたはこの使用できる機能的な方法でそれをしたい場合：

var list = this.state.data.map(p => { 
    return (
    <tr key={p.id}> 
     {Object.keys(p).filter(k => k !== 'id').map(k => { 
     return (<td key={p.id + '' + k}>{p[k]}</td>); 
     })} 
    </tr> 
); 
}) 

それとも読解力は確定申告の外にアイテムを分割するために：

var list = this.state.data.map(p => { 
    var items = Object.keys(p) 
     .filter(k => k !== 'id') 
     .map(k => { 
     return (
      <td key={p.id + k}>{p[k]}</td> 
     ) 
     }); 

    return (
     <tr key={p.id}> 
     {items} 
     </tr> 
    ); 
}); 

JSFiddle