前端之家

  1. 首页
  2. 问答

如何在具有结构{_id：“ xx”，timestamp：“ xx”，message：“ {” temperature：22“，” humi“：45}”}的React Table中显示数据？

• 问答

反应表
我向后端发出了axios.get请求，这反过来又从mongodb提供了一个大数据集。的 返回的数据结构为：

[
1: {_id: "5dd3be2ecf55e1ec388f502b",timestamp: 1574157870567,message: "{"temperature":58,"humidity":59,"pressure":"1 bar"}"}
2: {_id: "5dd3be2ecf55e1ec388f502a",timestamp: 1574157870067,message: "{"temperature":78,"humidity":79,"pressure":"1 bar"}"}
...
]

我想显示它到反应表。正在显示id和时间戳，但未显示温度和其他变量。
消息是字符串。如何解析后面的数据量-end将消息转换为对象？
后端代码 


    router.get('/viewData',async(req,res) =>{
    collection.find({},{_id:0,timestamp:0}).sort({timestamp:-1}).limit(400).toArray(function (err,resultantData) {
            if (err)
                throw err;
            //var storedDataArray ;
            //var gotData=[];
            //var index =0;
            //storedDataArray=resultantData;
            //console.log(storedDataArray)
            // storedDataArray.forEach(element => {
            //     gotData[index]=JSON.parse(element);
            //     console.log(gotData[index])
            //     index++;
            // })
            // console.log(gotData.length);
           res.status(200).json(resultantData);
        });

有什么办法可以在反应表中显示温度和其他数量？

反应表


class deviceData extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataList:[],data : ' '
        };
    }

    componentDidmount(){
        const url="http://localhost:5000/api/data/viewData";
        fetch (url,{
            method: "GET"
        }).then(response=> response.json()).then(result=>{
            console.log(result);

           this.setState({
            dataList : result,});
        });
  }


    render() {
        const columns =[
            {
                Header:"Message ID",accessor:"_id",sortable: true,filterable: false,style:{
                    textAlign: "left"
                },width: 300,maxWidth: 100,minWidth: 100,},{
                Header:"Time Stamp",accessor:"timestamp",{
                Header:"Temperature",id:'temperature',accessor: 'temperature'
            },{
                Header:"Pressure",id:'pressure',accessor: 'pressure'
            },{
                Header:"Humidity",id:'humidity',accessor: 'humidity'
            },]
       return(
           <div classname="ReactTable">
           <ReactTable
           columns={columns}
           data={this.state.dataList}
           defaultPageSize={10}
           classname="-striped -highlight"
           >
           </ReactTable>
           <div id={"#"+ this.props.id} ></div>
           </div>

       );
    }
}
[![React-Table][1]][1]


后端响应

[
    {
        "_id": "5dd3be2fcf55e1ec388f502c","timestamp": 1574157871067,"message": "{\"temperature\":93,\"humidity\":94,\"pressure\":\"1 bar\"}"
    },{
        "_id": "5dd3be2ecf55e1ec388f502b","timestamp": 1574157870567,"message": "{\"temperature\":58,\"humidity\":59,{
        "_id": "5dd3be2ecf55e1ec388f502a","timestamp": 1574157870067,"message": "{\"temperature\":78,\"humidity\":79,{
        "_id": "5dd3be2dcf55e1ec388f5029","timestamp": 1574157869567,"message": "{\"temperature\":88,\"humidity\":89,{
        "_id": "5dd3be2dcf55e1ec388f5028","timestamp": 1574157869066,"message": "{\"temperature\":99,\"humidity\":100,{
        "_id": "5dd3be2ccf55e1ec388f5027","timestamp": 1574157868567,"message": "{\"temperature\":38,\"humidity\":39,{
        "_id": "5dd3be2ccf55e1ec388f5026","timestamp": 1574157868067,"message": "{\"temperature\":82,\"humidity\":83,{
        "_id": "5dd3be2bcf55e1ec388f5025","timestamp": 1574157867566,"message": "{\"temperature\":76,\"humidity\":77,\"pressure\":\"1 bar\"}"
    }
]
burgud12 回答：如何在具有结构{_id：“ xx”，timestamp：“ xx”，message：“ {” temperature：22“，” humi“：45}”}的React Table中显示数据？

使用parse()

将字符串转换回对象

例如：var object = JSON.parse（str）;

重要的是用正确的访问器定义列。试试这个：

const columns = [
      {
        Header: "Id",accessor: "_id"
      },{
        Header: "timestamp",accessor: "timestamp"
      },{
        Header: "Temprature",accessor: "message.temprature"
      },{
        Header: "humidity",accessor: "message.humidity"
      },{
        Header: "pressure",accessor: "message.pressure"
      }   
    ];

并像下面这样在React-table中使用它：

<ReactTable
 data={loans}  // Instead of loans,use variable where you store your response 
 columns={columns}
 defaultPageSize={10}
 sortable={true}
/>
,

我认为您可以尝试在获取方法中添加 headers 

fetch (url,{
    method: "GET",headers: {
      "Accept": "application/json","Content-Type": "application/json",}
})

这将确保您的响应是JSON

首先尝试用邮递员尝试url，设置这些标头，然后查看结果是否为JSON，如果为JSON，我相信我的代码会为您提供帮助，如果不是JSON返回，请尝试更改您的后端代码以确保返回使用邮递员的JSON

mongodbnode.jsreact-tablereactjs
本文链接：https://www.f2er.com/3067725.html

大家都在问