が反応 - Iは、以下の通り状態でオブジェクトを持っているテーブル

Question

でデータをレンダリングする：

{ 
"data": { 
    "available": { 
     "profileOne": { 
      "a": 14, 
      "b": 14, 
      "c": 0, 
      "d": 0, 
      "e": 18 
     }, 
     "profileTwo": { 
      "a": 13, 
      "b": 9, 
      "c": 0, 
      "d": 0, 
      "e": 18 
     }, 
     "profileThree": { 
      "a": 12, 
      "b": 12, 
      "c": 0, 
      "d": 0, 
      "e": 14 
     }, 
     "profileFour": { 
      "a": 3, 
      "b": 3, 
      "c": 0, 
      "d": 0, 
      "e": 5 
     }, 
     "profileFive": { 
      "a": 6, 
      "b": 3, 
      "c": 0, 
      "d": 0, 
      "e": 11 
     } 
    }, 
    "isFetching": false 
} 

Iは以下に提供する次のサンプル画像ごとにデータを使用する必要がある：

私はこれをマップできるように、配列に変換する必要があることを理解しています。

誰にも解決策がありますか？

Answer 1

これは、あなたを始めるための例です。お役に立てれば。

const json = { 
    data: { 
    available: { 
     profileOne: { 
     a: 14, 
     b: 14, 
     c: 0, 
     d: 0, 
     e: 18 
     }, 
     profileTwo: { 
     a: 13, 
     b: 9, 
     c: 0, 
     d: 0, 
     e: 18 
     } 
    } 
    } 
}; 

const header = ["pro", "a", "b", "c", "d", "e"]; 
class App extends React.Component { 
    render() { 
    return (
     <table> 
     <thead> 
      <tr>{header.map((h, i) => <th key={i}>{h}</th>)}</tr> 
     </thead> 
     <tbody> 
      {Object.keys(json.data.available).map((k, i) => { 
      let data = json.data.available[k]; 
      return (
       <tr key={i}> 
       <td>{k}</td> 
       <td>{data.a}</td> 
       <td>{data.b}</td> 
       <td>{data.c}</td> 
       <td>{data.d}</td> 
       <td>{data.e}</td> 
       </tr> 
      ); 
      })} 
     </tbody> 
     </table> 
    ); 
    } 
} 

Answer 2

データを反復処理する必要がありますが、そのオブジェクトはマップ可能になるように変更する必要があります。

render(){ 
    const tableData = data.available 
    return 
     (<table> 
       <tr> 
        <td>Profile</td> 
        <td>a</td> 
        <td>b</td> 
        <td>c</td> 
        <td>d</td> 
        <td>e</td> 
       </tr> 
       {(Object.keys(tableData)) 
        .map(key=>({...tableData[key],title:key})) 
        .map(row=>(
         <tr> 

          {(Object.keys(row)) 
           .map(key=> 
            <td> 
             {row[key]} 
            </td> 
           ) 
         )} 
         </tr> 
       ) 
      </table> 
} 

あなたは、配列を提供するために、あなたのデータソースを変更することができれば、これは非常に簡単になることに注意してください：ここでは可能なレンダリング機能です。オブジェクトではリファクタリングをマップ可能にする必要があるため、コードがはるかに複雑になります。 Object.entriesを使用して

Answer 3

const obj = { 
 
"data": { 
 
    "available": { 
 
     "profileOne": { 
 
      "a": 14, 
 
      "b": 14, 
 
      "c": 0, 
 
      "d": 0, 
 
      "e": 18 
 
     }, 
 
     "profileTwo": { 
 
      "a": 13, 
 
      "b": 9, 
 
      "c": 0, 
 
      "d": 0, 
 
      "e": 18 
 
     }, 
 
     "profileThree": { 
 
      "a": 12, 
 
      "b": 12, 
 
      "c": 0, 
 
      "d": 0, 
 
      "e": 14 
 
     }, 
 
     "profileFour": { 
 
      "a": 3, 
 
      "b": 3, 
 
      "c": 0, 
 
      "d": 0, 
 
      "e": 5 
 
     }, 
 
     "profileFive": { 
 
      "a": 6, 
 
      "b": 3, 
 
      "c": 0, 
 
      "d": 0, 
 
      "e": 11 
 
     } 
 
    }, 
 
    "isFetching": false 
 
}} 
 

 
const entries = Object.entries(obj.data.available).map(data => Object.entries(data)) 
 
console.log(entries)

あなたがオーバーマップすることができ、アレイおよびサブアレイのセットを提供します。