第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

將原始json數(shù)據(jù)傳輸?shù)絩eactjs中的html表

將原始json數(shù)據(jù)傳輸?shù)絩eactjs中的html表

我正在尋找一種方法來(lái)在我的 React 應(yīng)用程序中顯示如下圖所示的表格 https://www.depicus.com/swim-bike-run/pace-conversion-chart這是我傳輸?shù)?JSON 的原始數(shù)據(jù)。我一直在為如何在我的應(yīng)用程序中顯示所有數(shù)據(jù)（如第一張圖片）而苦苦掙扎。這是我嘗試過(guò)的代碼。        <table>            <tbody>                <tr>                    {chartJSON.title.map((data, i) => <th key={i}>{data[i]}</th>)}                </tr>                                {chartJSON.paceChart.map((data, index) => {                    return <tr key={index}>{data[0]}</tr>                })}                            {chartJSON.paceChart.map((data, index) => {                    return <tr key={index}>{data[1]}</tr>                })}            </tbody>        </table>這是一些原始數(shù)據(jù){"title": [    ["KM PER HOUR", "MILES PER HOUR", "MINS PER KM", "MINS PER MILE", "5K", "10K", "HALF MARATH0N", "MARATHON"]],"paceChart": [    ["7.00kph", "4.35mph", "8:34", "13:40", "00:42:51", "01:25:42", "03:00:51", "06:01:42"],    ["7.10kph", "4.41mph", "8:27", "13:36", "00:42:15", "01:24:30", "02:58:18", "05:56:37"],    ["7.20kph", "4.47mph", "8:20", "13:25", "00:41:40", "01:23:20", "02:55:50", "05:51:40"],    ["7.30kph", "4.54mph", "8:13", "13:14", "00:41:05", "01:22:11", "02:53:25", "05:46:50"]   ]}誰(shuí)能幫我？謝謝！
查看完整描述

3 回答

?
絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊

在您的 JSON 對(duì)象中，您使用的是二維數(shù)組。我將其替換為一維數(shù)組，因?yàn)闆](méi)有必要使用二維數(shù)組。您在某些時(shí)候以錯(cuò)誤的方式使用了索引，我已經(jīng)修復(fù)了。


const chartJSON = JSON.parse(`{

"title": ["KM PER HOUR", "MILES PER HOUR", "MINS PER KM", "MINS PER MILE", "5K", "10K", "HALF MARATH0N", "MARATHON"]

,

"paceChart": [

["7.00kph", "4.35mph", "8:34", "13:40", "00:42:51", "01:25:42", "03:00:51", "06:01:42"],

["7.10kph", "4.41mph", "8:27", "13:36", "00:42:15", "01:24:30", "02:58:18", "05:56:37"],

["7.20kph", "4.47mph", "8:20", "13:25", "00:41:40", "01:23:20", "02:55:50", "05:51:40"],

["7.30kph", "4.54mph", "8:13", "13:14", "00:41:05", "01:22:11", "02:53:25", "05:46:50"]

   ]

}`);


const table =

<table>

  <tbody>

     <tr>

        {chartJSON.title.map((data, i) => <th key={i}>{data}</th> )}

     </tr>

                

        {

        

        chartJSON.paceChart.map((rowData,rowIndex)=> {

           return <tr key={rowIndex}> 

             { 

             rowData.map(cellData=> <td> {cellData} </td>) 

             } 

           </tr>

          })

          

        }

           

   </tbody>

</table>


const root = document.querySelector('body');


ReactDOM.render(table,root);

td,th,table{

  text-align:center;

  border:1px solid dodgerblue;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
MMTTMM

TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊

這是更新的答案。我刪除了身體中的重復(fù)地圖。


    <table>

  <tbody>

    <tr>

      {chartJSON.title[0].map((data, i) => {

        return <th key={i}>{data}</th>;

      })}

    </tr>


    {chartJSON.paceChart.map((data, index) => {

      return (

        <tr>

          {data.map((data2, i) => {

            return <td key={i}>{data2}</td>;

          })}

        </tr>

      );

    })}

  </tbody>

</table>;


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
30秒到達(dá)戰(zhàn)場(chǎng)

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊

嘗試這個(gè)


 render() {

  

    return (

       <table>

            <tbody>

                <tr>

                    {this.state.chartJSON.title.map((data, i) => <th key={"h${i}"}>{data}</th>)}

                </tr>

                

                {

                

           this.state.chartJSON.paceChart.map((row, index)=> 

          

          <tr>{row.map((item,i)=> <td key={i}>{item}</td>)}</tr>

                    

                )}

            

              

            </tbody>

        </table>

    )

  }


查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 3 回答
  • 0 關(guān)注
  • 188 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)