リアクションでダイナミックテーブルを作成する方法

Question

私はreacr-reduxで始まりました。私はいくつかのjsonデータをテーブル構造として設定しています。そのために私はこのようなデータを持っています

[ 
    { 

     "year": 2016, 

     "mix": [{ 

      "name": "A", 

      "volume": 0.55, 

     }, 
     { 

      "name": "B", 

      "volume": 0.2, 

     }, 
     { 

      "name": "C", 

      "volume": 0.0, 

     }, 
     { 

      "name": "D", 

      "volume": 0.0, 

     }], 

}, 
{ 

    "year": 2017, 

    "mix": [{ 

      "name": "A", 

      "volume": 0.55, 

     }, 
     { 

      "name": "B", 

      "volume": 0.2, 

     }, 
     { 

      "name": "C", 

      "volume": 0.0, 

     }, 
     { 

      "name": "D", 

      "volume": 0.0, 

     }], 

}, 
{ 

    "year": 2018, 

    "mix": [{ 

      "name": "A", 

      "volume": 0.55, 

     }, 
     { 

      "name": "B", 

      "volume": 0.2, 

     }, 
     { 

      "name": "C", 

      "volume": 0.0, 

     }, 
     { 

      "name": "D", 

      "volume": 0.0, 

     }], 

}, 
{ 

    "year": 2015, 
    "mix" :[{ 

      "name": "A", 

      "volume": 0.55, 

     }, 
     { 

      "name": "B", 

      "volume": 0.2, 

     }, 
     { 

      "name": "C", 

      "volume": 0.0, 

     }, 
     { 

      "name": "D", 

      "volume": 0.0, 

     }] 
}, 
{ 

    "year": 2019, 

    "mix": [ 
     { 

      "name": "A", 

      "volume": 0.55, 

     }, 
     { 

      "name": "B", 

      "volume": 0.2, 

     }, 
     { 

      "name": "C", 

      "volume": 0.0, 

     }, 
     { 

      "name": "D", 

      "volume": 0.0, 

     } 
    ], 


} 
] 

このような私のテーブル構造が欲しいです。基本的には年とその年のすべてのミックスを抽出します。最終的なテーブル構造は、私がこの

 <table className="table table-bordered"> 
        <thead> 
        <tr> 
         <th></th> 
        {this.props.allYear.map((data) =>(
         <th>{data.year.toString().substr(0,4)}</th> 
        ))} 
        </tr> 
        </thead> 
        <tbody> 
        {this.props.allYear.map((data) =>(
         data.mix.map((Data1) => (

          <tr> 

           {Data1.name} 
          </tr> 

       )) 
       ))} 
        <td></td> 
       {this.props.allYear.map((data) =>(
        <td> 
         {data.mix.map((Data1) => { 

          return(
           <tr> 
           {Data1.volume} 

          </tr> 
          ) 



         })} 
       </td> 
       ))} 

        </tbody> 

       </table> 

のようなコードを書かれているが、私のすべてのデータがそのテーブルがどのように見えるので、私は書かれているTRのダウンTR 1を行っているため、この

2015 2016 2017 2018 
A 0.55 0.55 0.55  0.55 
B 0.2  0.2  0.2  0.2 
C 0  0  0  0 
D 0  0  0  0 

のようになります。

2015 2016 2017 2018 
A    
B    
C    
D    
    0.55 0.55 0.55 0.55 
    0.2 0.2 0.2 0.2 
    0 0 0 0 
    0 0 0 0. 

は、私はこの

Answer 1

：私はもっとこのような何かにあなたのデータ構造を変更することをお勧め

var sorted = this.props.allYear.sort((a, b) => a.year - b.year); 
// create rows object, letters as keys, each value an array of volumes 
var rows = {}; 
sorted.forEach(function (year) { 
    year.mix.forEach((data) => { 
     if (!rows[data.name]) rows[data.name] = []; 
     rows[data.name].push(data.volume); 
    }); 
}); 

return (
    <table className="table table-bordered"> 
     <thead> 
      <tr> 
       <th></th> 
       {sorted.map((data, i) => <th key={i}>{data.year}</th>)} 
      </tr> 
     </thead> 
     <tbody> 
      {Object.keys(rows).map((letter) => 
       <tr> 
        <td>{letter}</td> 
        {rows[letter].map((data) => <td>{data}</td>)} 
       </tr> 
      )} 
     </tbody> 
    </table> 
); 

しかしこれには「穴」では存在しないことを前提としていデータ。

Answer 2

あなたのテーブル構造を修正する方法を教えてくださいこれが全てです種類が間違っています。あなたがしているのは、4 <tr>を作り、次にランダムな束<td>を作ることです。基本的なテーブル構造はテーブル→tbody→tr→tdです。 2つのマップ関数を作成する必要があります。 Chris Gのコメントのように、あなたのデータ構造はこれを簡単にするように設定されていません。実際にあなたがしたいことをより困難にしています。私はあなたの元のデータ構造を維持する方法を考え出した

[ 
    A: [{ 
     year: 2015, 
     volume: 0.0 
    },{ 
     year: 2016, 
     volume: 0.0 
    },{ 
     year: 2017, 
     volume: 0.0 
    }], 
    B: [{ 
     year: 2015, 
     volume: 0.0 
    },{ 
     year: 2016, 
     volume: 0.0 
    },{ 
     year: 2017, 
     volume: 0.0 
    }], 
    C: ... 
]