Transfer raw json data to html table in reactjs

Question

I'm looking for a way to display a table like the following image in my react app https://www.depicus.com/swim-bike-run/pace-conversion-chart

And here is the raw data I transferred to JSON.

I was struggling with how to display all the data like the first image in my app.

Here is the code I did try.

        <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>

Here is some of the raw data

{
"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"]
   ]
}

Can anyone help me? Thanks!

Don't use images to show text data. You can write JSON data as text in your post. — Omkar76
– Omkar76, Commented Sep 15, 2020 at 7:42
Sorry about that, I just added some of the raw data I created — Peter Wu
– Peter Wu, Commented Sep 15, 2020 at 7:51

Omkar76 · Accepted Answer · 2020-09-15 08:58:40Z

In your JSON object, You are using a 2D array. I replaced it with 1D array as it's not necessary to use 2D array. You were using indexes in wrong way at some points I have fixed that.

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>

Siva Rm K · Accepted Answer · 2020-09-15 09:01:11Z

0

try this

 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>
    )
  }

fiddler

answered Sep 15, 2020 at 9:01

Siva Rm K

2941 silver badge6 bronze badges

Comments

Taher · Accepted Answer · 2020-09-15 09:30:05Z

0

This is updated answer. I remove duplicate map in body.

    <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>;

edited Sep 15, 2020 at 9:30

answered Sep 15, 2020 at 8:12

Taher

973 silver badges11 bronze badges

1 Comment

Peter Wu Over a year ago

It closes to my answer. But all the words were messed up. Any way to fix this? imgur.com/a/8y5cKEL

Collectives™ on Stack Overflow

Transfer raw json data to html table in reactjs

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related