Невозможно получить ключи от попадания JSON API в таблицу с помощью функции React и axios.get - PullRequest
Новая
       24

Невозможно получить ключи от попадания JSON API в таблицу с помощью функции React и axios.get

0 голосов
/ 03 октября 2019 
I have jsonAPI like this-----

{"result":
{"metaData":
[
{"name":"x"},
{"name":"y"},
{"name":"z"}
],
"rows":
[
["2012-12-06 11:15:12.440136","02","BFR85"],
["2011-12-04 10:15:14.756832","02","BRFU85"],
["2009-12-08 11:22:32.470736","03","UNHAT85]
]}}

Я хочу использовать этот JSONAPI для отображения данных в таблице с помощью response js:
Вот так я отображаю данные из JSONAPI с помощью axios.get 

import React, { Component } from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { connect } from 'react-redux';
import axios from 'axios';


class Table extends React.Component {
  state = { something: [] };

  componentDidMount() {
    console.log('in component mount for, ');    
      return axios.get('APIURL')
      .then(res => {     
        const something= res.data.result.rows;        
        this.setState({ something});       
      }).catch(err => console.log(err))
}
  render(){ 

  return (   
    <Paper >
     <Table aria-labelledby="DATA">
        <TableHead>
        <TableRow>
            <TableCell align="center">INDEX</TableCell>
            <TableCell align="center">DataValue</TableCell>                 
          </TableRow>       
        </TableHead>
        <TableBody>        
          {this.state.something.map((rows,i) => (
            <TableRow key={i}>
              <TableCell component="th" scope="row">
                {i}
              </TableCell>
              <TableCell>{this.state.something[i]}</TableCell>
            </TableRow>
          ))}
        </TableBody>

      </Table>
    </Paper>
  );
}
}

export default Table;

Ожидаемый результатниже показано в таблице --- 

    x     2012-12-06 11:15:12.440136","02","BFR85"
    y     2011-12-04 10:15:14.756832","02","BRFU85"
    z     2009-12-08 11:22:32.470736","03","UNHAT85"

Фактический результат, отображаемый в таблице пользовательского интерфейса, показан ниже: --- 

    1     2012-12-06 11:15:12.440136","02","BFR85"
    2     2011-12-04 10:15:14.756832","02","BRFU85"
    3     2009-12-08 11:22:32.470736","03","UNHAT85"

Пожалуйста, помогите по этому вопросу, чтобы получить ожидаемыйрезультат ....

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

Пожалуйста, попробуйте код удара. 

              <TableCell component="th" scope="row">
                {this.state.keyValues[i].name}
              </TableCell>
0 голосов
/ 03 октября 2019

Пожалуйста, попробуйте это. 

class Table extends React.Component {
  state = { 
    something: [], 
    keyValues: [],
};

  componentDidMount() {
    console.log('in component mount for, ');    
      return axios.get('APIURL')
      .then(res => {     
        const something= res.data.result.rows; 
        const keyValues = res.data.result.metaData;       
        this.setState({ something, keyValues});       
      }).catch(err => console.log(err))
}
  render(){ 

  return (   
    <Paper >
     <Table aria-labelledby="DATA">
        <TableHead>
        <TableRow>
            <TableCell align="center">INDEX</TableCell>
            <TableCell align="center">DataValue</TableCell>                 
          </TableRow>       
        </TableHead>
        <TableBody>        
          {this.state.something.map((rows,i) => (
            <TableRow key={i}>
              <TableCell component="th" scope="row">
                {this.state.keyValues[i].name}
              </TableCell>
              <TableCell>{this.state.something[i]}</TableCell>
            </TableRow>
          ))}
        </TableBody>

      </Table>
    </Paper>
  );
}
}

export default Table;
...