Как отобразить данные объекта в таблицу с помощью Reactjs

Question

Я получил данные из API, и они выглядят как объектные данные (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;

И я хочу отобразить все данные в таблице следующим образом.

С console.log он вернул объект, подобный этому

Но я понятия не имею, как выполнить итерацию для отображения данных с этими объектными данными.До того, когда я использую среду Express & NodeJS & Pug, я использую для ... в выражении, и это хорошо работает.Но в Reactjs с этим кодом

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

получена такая ошибка

  Line 24:  Parsing error: Unexpected token

Я перепробовал множество других итерационных методов, но, похоже, это неправильно.

Answer 1

Если вы намеревались повторять значения, Object.entries() также может сделать трюк, просто пропустите ключевую часть.

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

API в списке data является object. Чтобы перебрать объект и использовать данные, а также key, сначала давайте получим keys от объекта (внутри вашего render). Это можно сделать с помощью

const dataKeys = Object.keys(chartData);

Далее, давайте переберем ключи и сгенерируем tr и td и отобразим необходимые данные. Это было бы похоже на (внутри вашего tbody)

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

Разместите вышеуказанный код в соответствующем месте. Используется следующая логика: сначала получить keys объекта в массиве. Затем map поверх них и верните необходимое jsx, которое будет добавлено в тело таблицы. Надеюсь, это поможет.

Предположение: data (Объект) в API указывает на переменную chartData в приведенном выше коде.