Not able to set the JSON object of Arrays in React js using axios.get function and display the object of Arrays in table

user_8165454 0
Viewed 351

I have JSON API like this-----

{
    "result": [
        {
            "date": "2019/10/14",
            "a": "T",
            "b": "S",
        },
        {
            "date": "2020/10/14",
            "a": "T",
            "b": "S",
        }
              ]
}

I want to use this above JSONAPI to display the data in the Table using react js: This is how I am displaying data from JSONAPI using axios.get function----

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 keyValue extends React.Component {
  state = { value: [],
    keyValues: []
 };

  componentDidMount() {   
      return axios.get(ApiURL)
      .then(res => {       
        const value= res.data.result;                     
        this.setState({ value});  
        console.log(value);       
      }).catch(err => console.log(err))
}
  render(){ 

  return (

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

            </TableRow>
          ))}
        </TableBody>

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

export default KeyValue;

I want to display the output in the table in the following manner----

if index [0] is selected then the value should be

 date  2019/10/14
 a     T
 b     S

Issue---- I am not getting the below error in console when trying to set the value:- "Object doesn't support property or method 'map'"

axios reactjs key-value api
2 Answers

You have misunderstood it completely

this.setState({...this.state, value: result})

and then try this 

{this.state.value.map((v, i) => (
            <TableRow key={i}>
              <TableCell component="th" scope="row">
                {i}
              </TableCell>
              <TableCell>{v.date}</TableCell> 

            </TableRow>
          ))}
user_100746810

this.state.value is an array of objects, which means i is an object when you are using this.state.value.map((i) =>.

You are using it as an index: this.state.value[i]

Have a look at Array.map and either use i as an object, or use the second parameter for the index

I think you should update you code to something like this: 

{this.state.value.map((val, index) => <TableRow key={index}>
    <TableCell component="th" scope="row">
       date: {val.date}
    </TableCell>
    <TableCell component="th" scope="row">
       a: {val.a}
    </TableCell>
    <TableCell component="th" scope="row">
       b: {val.b} 
    </TableCell>
  </TableRow>
}

This will print the properties of each object in the this.state.value into each table cell. You can update this to suite your needs

user_26779530
Related