Convert JSON into table records using reactjs

Question

I am trying to fetch the data from spring boot layer and render it on front end using react js in tabular form . However I see the error mentioned below.

I would like to see the json data in tabular form but I get errors on map function.TypeError: this.state.currencies.map is not a function. Below mentioned is the UI code.

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Table} from 'react-bootstrap';

class AppCrypto extends Component{

  constructor(props) {
  super(props);
  this.state = {currencies: [
    {id:null,currencyname:null,currencyticker:null}
  ]
};
}



componentDidMount() {
   fetch('/secretdata/allcurrency/',{
     method:'GET',
     headers:{
       'Content-Type':'application/json'
     }
   })
   .then( function(response){
     return response.json();
   })
   .then(function(myJson){
      return JSON.stringify(myJson);
   })
   .then (crypto => {
     console.log(crypto);
     this.setState({currencies:crypto});

  });

}

  render(){
    return(
      <div className="container-fluid">
      <Table striped bordered hover variant="dark">
        <thead>
          <tr>
           <th>ID</th>
           <th>CURRENCY_NAME</th>
           <th>CURRENCY_TICKER</th>
          </tr>
        </thead>
        <tbody>
        {this.state.currencies.map(function(item, key){
            return(
              <tr key={key}>
                 <td>{item.id}</td>
                 <td>{item.currencyname}</td>
                 <td>{item.currencyticker}</td>
              </tr>
            )
        })}
        </tbody>
      </Table>
      </div>
    );
  }
}



export default AppCrypto;

jgoday · Accepted Answer · 2019-03-16 22:54:09Z

3

You shouldn't use JSON.stringify. stringify converts the json to a string. You are storing a string in the state instead of an array.

So if you want the data as an array, either use JSON.parse(str) or check if the response already is a valid json.

answered Mar 16, 2019 at 22:54

jgoday

2,8461 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V3nky Over a year ago

good god ,, thank you so much .. I have cleared the json.stringify and it worked out now.

Jayce444 Over a year ago

@V3nky if jgoday's answer fixed your problem please mark it as the correct solution, thanks

Collectives™ on Stack Overflow

Convert JSON into table records using reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related