Как получить данные из подстрок JSON API, которые закодированы - PullRequest
Новая
       19

Как получить данные из подстрок JSON API, которые закодированы

0 голосов
/ 08 декабря 2018

Его структура API, которую я получаю с помощью redux. 

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

Данные Json Payload представлены в шестнадцатеричном формате, когда мы будем декодировать их в виде строки, они будут выглядеть следующим образом: 

{"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?

...