首页 > 解决方案 > 如何显示来自特定索引位置的表数据

问题描述

我想从特定索引位置显示表格。我的源代码显示了数据库中包含的所有值。有什么方法可以从特定位置显示。

import React,{Component} from 'react';
import {Table,ButtonToolbar,Button} from 'react-bootstrap';
import axios from 'axios';
// import Dis from './Display';

export default class Display extends React.Component{
  constructor(props) {
    super(props);
    this.getComplaints();
    this.state = { 
      complaints: [10]
    };
    // this.handleClick = this.handleClick.bind(this);
    // this.delcomp = this.delcomp.bind(this);
  }
  handleClick = () => {
    console.log(this);
  }
    
      getComplaints() {
        axios.get(`http://localhost:80/get/complaints`)
          .then(res => {
            // console.log(res.data)
            // const complaints = res;
            this.setState({ complaints: res.data });
          })
      }

      // handleClick(id) {
      //   console.log(id)
      // }
    
    render() {
        return (
            <Table id="complaints"  frameBorder="dark" bordered>
            
  <thead>
    <tr>
      <th>Regd_no</th>
      <th>Year Of Study</th>
        <th>Location</th>
      <th>Department</th>
      <th> Disciplinary Issue</th>
    </tr>
  </thead>
  <tbody>
    
           { 
             this.state.complaints.map((obj, i) => {
               return (
                <tr key={i}>
                <td>{obj.RegistrationNum}</td>
                <td>{obj.YOST}</td>
                <td>{obj.Locate}</td>
                <td>{obj.Depart}</td>
                <td>{obj.Issues}</td>
                {/* <td><Button onClick={this.handleClick()} bsStyle="primary" bsSize="large"> Delete </Button></td> */}
              </tr>
               )
             
           }) 
          }
    {/* {this.state.complaints.map(complaints =>(<tr >{complaints.regdno}</tr>))} */}
    {/* {this.state.complaints.map(complaints =>(<tr  align="right" key={complaints.id}> {complaints.yos}</tr>))} */}
    {/* {this.state.complaints.map(complaints =>(<tr align="right" key={complaints.reg}> {complaints.dept}</tr>))} */}

</tbody>
 
  </Table>
        )
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

以上是我以表格格式显示值的源代码。

/**
 * ComplaintController
 *
 * @description :: Server-side actions for handling incoming requests.
 * @help        :: See https://sailsjs.com/docs/concepts/actions
 */

module.exports = {
  
    createComplaint: function (req, res, next) {
        console.log(req.body)
        Complaint.create(req.body, function (err, complaint) {
            if(err) {
                res.status(500).send(err)
            }
            res.send({message: "complaint created"})
        })
    },

    getComplaints: function (req, res, next) {
        Complaint.find({}, function (err, complaint) {
            if(err) {
                res.status(500).send(err)
            }
            res.ok(complaint)
        })
    }
};

这是将值存储到数据库中的 Api 代码。如何显示来自特定索引位置的值。是否有任何解决方案可以从特定位置显示

标签: javascriptreactjssails.jssails-mongo

解决方案


推荐阅读