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

Question

I want to Display My Complaints Data in the Tabular Form Using the table. i have tried using List it worked. I don't how to Display data in tabular form using Table. When i have tried console log and postman it displays the data contained in the database. I want to get the data in the tabular form. Please help me with a solution.

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

Answer 1

Displaying data in Tabular form from an API response can be done using fixed data table-2. It provides a dynamic table with the number of rows as the index of your JSON object.

For more information , you may visit : http://schrodinger.github.io/fixed-data-table-2/example-object-data.html