以反应,降序顺序映射数组

时间:2018-02-23 21:16:31

标签: arrays json reactjs

我想使用以下数据

[
  {
      "id": "1",
      "label": "Score",
      "tabledata": [ 
        {"label": "Day 1", "data": {"score": 73}},
        {"label": "Day 2", "data": {"score": 64}},
      {"label": "Day 3", "data": {"score": 72}}
      ]
  }, {
      "id": "2",
      "label": "Success",
      "tabledata": [ 
        {"label": "Day 1", "data": {"score": 73 }},
        {"label": "Day 2", "data": {"score": 64 }},
        {"label": "Day 3", "data": {"score": 72}}
      ]
  } ]

<table>
  <tr>    
    <td>
    
    </td>
    <td>
     Score
    </td>
    <td>
     Success
    </td>
   
  </tr>
  
   <tr>    
    <td>
      Day 3
    </td>
    <td>
     72
    </td>
    <td>
     72
    </td>
   
  </tr>
  
   <tr>    
    <td>
      Day 2
    </td>
    <td>
     64
    </td>
    <td>
     64
    </td>
   
  </tr>
 <tr>    
    <td>
      Day 1
    </td>
    <td>
     73
    </td>
    <td>
     73
    </td>
    
  </tr>
  </table>

我提出的解决方案是:

 <table >
        <tr>
          <td> </td>
          <td>
            {this.props.GraphData[0].label}
          </td>
          <td>
            {this.props.GraphData[1].label}
          </td>

</tr> 
<tr>
          <td> </td>
          <td>
            {this.props.GraphData[0].tabledata.data.map(row => ([ <tr key={i}>  <td>  {row.score}</td> </tr> )])};
          </td>
          <td>
            {this.props.GraphData[1].tabledata.data.map(row => ([ <tr key={i}>  <td>  {row.score}</td> </tr> )])};
          </td>

</tr> 
</table>

如何使用reverse.map转换值以降序显示(第一行(第3天)和最后一行(第1天)。 最后有没有办法避免使用数据文件中的[0]或[1],而是使用映射表的所有行和列?

0 个答案:

没有答案