如何使用 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.

Answer 1

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

Answer 2

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.