从 JSON API 编码的子行获取数据答案

【问题标题】：Get data from JSON API encoded sub rows从 JSON API 编码的子行获取数据
【发布时间】：2018-12-08 21:47:17
【问题描述】：

我通过 redux 获得的 API 结构。

{
"wrapper": {
    "db": [
        {
            "payload": "7b226465766963654964223a224d7956656869636c65222c226576656e7444617461223a7b2273746174697374696373223a7b227370656564223a37372c2272706d73223a313532342c227368727466743133223a362c22636f6f6c616e7454656d7065726174757265223a35302c2272656c61746976655468726f74746c65506f736974696f6e223a31302c226162736f6c7574655468726f74746c65506f736974696f6e223a31362c2274696d6553696e6365456e67696e655374617274223a3330302c2274656d7065726174757265223a38332c226761734c6576656c223a39382c22726f7574654964223a22524f55544539393332227d2c226c6f636174696f6e223a7b226c61746974756465223a31392e34333037352c226c6f6e676974756465223a2d39382e303939322c22616c746974756465223a397d7d7d"
        }
       ]
    }
}

Json Payload 数据是 Hex 格式，当我们解码为 String 时，它看起来像这样：

{"deviceId":"MyVehicle","eventData":{"statistics":{"speed":77,"rpms":1524,"shrtft13":6,"coolantTemperature":50,"relativeThrottlePosition":10,"absoluteThrottlePosition":16,"timeSinceEngineStart":300,"temperature":83,"gasLevel":98,"routeId":"ROUTE9932"},"location":{"latitude":19.43075,"longitude":-98.0992,"altitude":9}}}

我想在 React Table 中的数据中显示有效负载，尝试了太多类型但没有从它们中起作用，这是代码：

import React, { Component } from "react";
import { Collapse } from 'reactstrap';
import { Tab, Tabs } from 'react-bootstrap';
import { connect } from 'react-redux';
import { getAllChain } from '../../actions/terminalActions';

// Import React Table
import ReactTable from "react-table";
import "./react-table.css";

class Terminal extends Component {
    constructor(props, context) {
      super(props, context);
      this.handleSelect = this.handleSelect.bind(this);
      this.toggle = this.toggle.bind(this);
      this.state = {
        key: 1,
        collapse: true,
        data:[]
    }
  }

  componentDidMount(){
    this.props.getAllChain().then((d) => {
        this.setState({
            data: d.data.wrapper.db
        });
    })
  }

    handleSelect(key) {
      this.setState({ key });
    }

    toggle() {
      this.setState({ collapse: !this.state.collapse, condition: !this.state.condition });
    }

      render() {
        const data = this.state.data;
        console.log('Data:', data);

              const column = [
                  {
                      id: "payload",
                      Header: "Data",
                      accessor: (d) => {
                          return  d.payload = new Buffer(d.payload).toString();
                      },
                      style: {
                          textAlign: 'center'
                      },

                  },
              ];


     return (
    <div className="terminal term_tabs" style={{backgroundColor: "rgba(50, 50, 62, 0.4)"}}>
        <div className="terminal-header">
            <div className="terminal-title">
            <div onClick={this.toggle} className={this.state.condition ? 'button' : 'button toggled'}>
              <i className="fas fa-chevron-right" />
              {' '}
              &nbsp;
            </div>
            Terminal
          </div>
        </div>
            <Collapse isOpen={this.state.collapse}>
              <Tab eventKey={1} title="Test">
                <div className='tabs_body'>
                    <ReactTable
                      data={data}
                      columns={column}
                      defaultPageSize={10}
                      loading={this.props.isLoading}
                      className="-striped -highlight"
                    />
                </div>
              </Tab>
            </Tabs>
            </Collapse>
        </div>
    );
  }
}

const mapStateToProps = ({ terminalReducer: { items } }) => ({
    items
});

export default connect (mapStateToProps, {getAllChain})(Terminal);

如何在 React 表的数据中显示有效载荷？

【问题讨论】：

return d.payload = new Buffer(d.payload).toString(); 似乎不对。为什么要设置并返回有效负载？你的反应表目前是做什么的？

标签： javascript reactjs react-redux react-table

【解决方案1】：

function hexToString (hex) {
    var string = '';
    for (var i = 0; i < hex.length; i += 2) {
      string += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    }
    return string;
}


var result = hexToString('7b226465766963654964223a224d7956656869636c65222c226576656e7444617461223a7b2273746174697374696373223a7b227370656564223a37372c2272706d73223a313532342c227368727466743133223a362c22636f6f6c616e7454656d7065726174757265223a35302c2272656c61746976655468726f74746c65506f736974696f6e223a31302c226162736f6c7574655468726f74746c65506f736974696f6e223a31362c2274696d6553696e6365456e67696e655374617274223a3330302c2274656d7065726174757265223a38332c226761734c6576656c223a39382c22726f7574654964223a22524f55544539393332227d2c226c6f636174696f6e223a7b226c61746974756465223a31392e34333037352c226c6f6e676974756465223a2d39382e303939322c22616c746974756465223a397d7d7d');

console.log(result);

您可以使用hexToString 将十六进制转换为字符串，并为Buffer 调用此函数

accessor: (d) => {
   return  d.payload = hexToString(d.payload);
},

【讨论】：