Accessing JSON object within Object using React/Axios

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…

kLabz · Accepted Answer · 2018-01-28 21:46:56Z

5

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

answered Jan 28, 2018 at 21:46

kLabz

1,8271 gold badge16 silver badges14 bronze badges

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

Comments

Eli · Accepted Answer · 2020-08-19 18:10:56Z

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.

bezzoon · Accepted Answer · 2018-01-28 21:36:33Z

0

You're might have to parse the JSON. Might be good to do that before you save it.

  const coins = JSON.parse(res.data)

answered Jan 28, 2018 at 21:36

bezzoon

2,0295 gold badges28 silver badges59 bronze badges

Collectives™ on Stack Overflow

Accessing JSON object within Object using React/Axios

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related