How to render object data to table with Reactjs

Question

I got a data from API and it seems like Object data(JSON) Public API Link

import React, { Component } from 'react';
import axios from 'axios';
import './PostContainer.css';

class PostContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { chartData: {} };
  }

  async componentDidMount() {
    let { data: chartData } = await axios.get(
      'https://api.bithumb.com/public/ticker/all'
    );
    this.setState({ chartData });
  }

  render() {
    const { chartData } = this.state;
    // chartData.data.date = undefined;
    // delete chartData.data.date;
    console.log(`DATA ${chartData.data}`);

    // for (const val, index in chartData.data) {
    //   console.log(`${index} : ${val.sell_price}`)
    // }

    return (
      <div className="Post">
        <table id="table" className="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Coin Name</th>
              <th>Current Price</th>
              <th>Volume</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{?? What should I enter?}</td>
              <td>123123123123</td>
              <td>12312312</td>
            </tr>
            <tr>
              <td>ETH</td>
              <td>121243123</td>
              <td>1231231</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default PostContainer;

And I want to render all data to table like this.

With console.log, it returned Object like this

But I don't have any idea how to iterate to render the data with these object data. Before when I use Express & NodeJS & Pug environment I use for...in statement and it works well. But in Reactjs with this code

for (const val, index in chartData.data) {
      console.log(`${index} : ${val.sell_price}`)
    }

It got error like this

  Line 24:  Parsing error: Unexpected token

I tried lots of another iteration method but it seems not right.

chartData is array?

Junius L
– Junius L

2019-06-16 16:06:55 +00:00
Commented Jun 16, 2019 at 16:06 — Junius L
– Junius L, Commented Jun 16, 2019 at 16:06

user-9725874 · Accepted Answer · 2019-06-16 17:36:15Z

2

If you meant to iterate the values Object.entries() can also do the trick just skip the key part.

for (const [key, value] of Object.entries(chartData.data)) {
  console.log(`${value.sell_price}`)
}

// Or, via forEach

Object.entries(chartData.data).forEach(([key, value]) => {
  console.log(`${value.sell_price}`) 
});

edited Jun 16, 2019 at 17:36

answered Jun 16, 2019 at 17:19

user-9725874

8619 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

writingdeveloper Over a year ago

Thanks for the help! I solved the problem with this solution.

Panther · Accepted Answer · 2019-06-16 16:23:17Z

The listed API data is an object. To iterate over the object and use the data as well as the key, first lets get the keys from the object(inside your render). This can be done using

const dataKeys = Object.keys(chartData);

Next, lets iterate over the keys and generate a tr and the td and display the required data. That would be similar to (inside your tbody)

{
  map(dataKeys, (k) => {
   const data = chartData[k];
    return (
       <tr>
          <td>{k}</td>
          <td>{data.sell_price}</td>
          <td>{data.units_traded}</td>
        </tr>
    );
  });
}

Place the above code at the appropriate place. The logic used is, first get the keys of the object in an array. Then map over them and return the required jsx that would be added to the table body. Hope this helps.

Assumption: data(Object) in API points to chartData variable in the above code.

Collectives™ on Stack Overflow

How to render object data to table with Reactjs

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related