Accessing JSON object within Object using React/Axios - json

Question

I’m working with an API that shows data for cryptocurrencies called CryptoCompare. I’m a React noob but I’ve managed to use Axios to do the AJAX request. However I’m having trouble accessing the JSON elements I want.
Here’s what the JSON looks like: https://min-api.cryptocompare.com/data/all/coinlist
Here is my request:
import React, { Component } from 'react';
import './App.css';
import axios from "axios";
var NumberFormat = require('react-number-format');
class App extends Component {
constructor(props) {
super(props);
this.state = {
coinList: []
};
}
componentDidMount() {
axios.get(`https://min-api.cryptocompare.com/data/all/coinlist`)
.then(res => {
const coins = res.data;
//console.log(coins);
this.setState({ coinList: coins});
});
}
// Object.keys is used to map through the data. Can't map through the data without this because the data is not an array. Map can only be used on arrays.
render() {
console.log(this.state.coinList.Data);
return (
<div className="App">
{Object.keys(this.state.coinList).map((key) => (
<div className="container">
<span className="left">{key}</span>
<span className="right"><NumberFormat value={this.state.coinList[key].CoinName} displayType={'text'} decimalPrecision={2} thousandSeparator={true} prefix={'$'} /></span>
</div>
))}
</div>
);
}
}
export default App;
I am able to output some JSON using console.log(this.state.coinList.Data);. It outputs the JSON object, but I am unable to console.log properties of the object itself.
How would I, for example, output the CoinName property of the first element 42?
console.log(this.state.coinList.Data.CoinName) doesn’t work
nor does console.log(this.state.coinList.Data[0].CoinName) etc…

Answer 1

You are iterating over this.state.coinList while you want to iterate over this.state.coinList.Data.
Try this:
render() {
const data = this.state.coinList.Data;
if (data == null) return null;
return (
<div className="App">
{Object.keys(data).map((key) => (
<div className="container">
<span className="left">{key}</span>
<span className="right"><NumberFormat value={data[key].CoinName} displayType={'text'} decimalPrecision={2} thousandSeparator={true} prefix={'$'} /></span>
</div>
))}
</div>
);
}
CodeSandbox here: https://codesandbox.io/s/3rvy94myl1

Answer 2

I also stumbled with that same problem as yours. You cannot access an object inside a data because it is empty when the render happens. What I did was I made a conditional render where if the data is empty, it will just show a loading screen or something like that. And when the data loads , it will access the object inside that data. I can now access the object inside because I waited for the data to load inside render.
I hope this answer can help future react users
return (
<div>
{this.state.coinList.length>0? <h1>{this.state.coinList[0].coinName}</h1>: "Loading"}
</div>
);
}
Added: To console.log the data , you can create a new component inside the conditional render. Inside that component, you can access all the data you want because it is rendered after the data is loaded.

Answer 3

You're might have to parse the JSON. Might be good to do that before you save it.
const coins = JSON.parse(res.data)