如何使用表格形式的GET API获取数据

时间:2018-05-29 08:40:38

标签: javascript reactjs axios

我想使用表格以表格形式显示我的投诉数据。我尝试使用List工作。我不知道如何使用Table以表格形式显示数据。当我尝试过控制台日志和邮递员时,它会显示数据库中包含的数据。我想以表格形式获取数据。请帮我解决一下。

import React,{Component} from 'react';
import {Table} from 'react-bootstrap';
import axios from 'axios';

export default class Display extends React.Component{
  constructor(props) {
    super(props);
    this.componentDidMount();
    this.state = {
      complaints: []
    };
  }    
      componentDidMount() {
        axios.get(`http://localhost:80/get/complaints`)
          .then(res => {
            // console.log(res.data)
            // const complaints = res;
            this.setState({ complaints: res.data });
          })
      }
    
    render() {
      console.log(this.state.complaints)
        return (
          // <ul>
          // {this.state.complaints.map(complaints => (
          //   <li key={complaints.id}>{complaints.Regdno}</li>
          // ))}
          //   </ul>
            <Table responsive>
            
  <thead>
    <tr >
      <th>Regd_no</th>
      <th>Year Of Study</th>
        <th>Location</th>
      <th>Department</th>
      <th> Disciplinary Issue</th>
    </tr>
  </thead>
 
  </Table>
  
  

        )
    }
}

1 个答案:

答案 0 :(得分:0)

可以使用固定数据表-2从API响应以表格形式显示数据。 它提供了一个动态表,其中行数作为JSON对象的索引。

有关详细信息,请访问: http://schrodinger.github.io/fixed-data-table-2/example-object-data.html