Hello I have made a simple AXIOS get request and receive an array of objects. But the example I used to achieve this returns all array at one and I need to separate the objects so I could use each of them separately.

class apitest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cryptos: []
    };
  }

  ponentDidMount() {
    axios
      .get(
        ",ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
      )
      .then(res => {
        const cryptos = res.data;
        console.log(cryptos);
        this.setState({ cryptos: cryptos});
      });
  }

  render() {
    return (
      <div className="test">
        {Object.keys(this.state.cryptos).map(key => (
          <div id="crypto-container">
            <span className="left">{key}</span>
            <span className="right">
              <NumberFormat
                value={this.state.cryptos[key].EUR}
                displayType={"text"}
                decimalPrecision={2}
                thousandSeparator={true}
                prefix={"€"}
              />
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default apitest;

Hello I have made a simple AXIOS get request and receive an array of objects. But the example I used to achieve this returns all array at one and I need to separate the objects so I could use each of them separately.

class apitest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cryptos: []
    };
  }

  ponentDidMount() {
    axios
      .get(
        "https://min-api.cryptopare./data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
      )
      .then(res => {
        const cryptos = res.data;
        console.log(cryptos);
        this.setState({ cryptos: cryptos});
      });
  }

  render() {
    return (
      <div className="test">
        {Object.keys(this.state.cryptos).map(key => (
          <div id="crypto-container">
            <span className="left">{key}</span>
            <span className="right">
              <NumberFormat
                value={this.state.cryptos[key].EUR}
                displayType={"text"}
                decimalPrecision={2}
                thousandSeparator={true}
                prefix={"€"}
              />
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default apitest;

• javascript
• html
• reactjs
• axios

• Could you please post an example of the response you are receiving? – Marcus Commented Apr 29, 2019 at 8:33
• Object { BTC: {…}, ETH: {…}, XRP: {…}, BCH: {…}, EOS: {…}, TRX: {…} } – Andrew Commented Apr 29, 2019 at 8:36
• 1 This isn't an array of objects, this is an object with properties which are in turn objects. Is that right? – Marcus Commented Apr 29, 2019 at 8:41
• Yes you are correct! – Andrew Commented Apr 29, 2019 at 8:49
• Exactly this is an object with properties which are in turn objects. So either edit your question or ask accordingly – Deepankar Singh Commented Apr 29, 2019 at 8:50

2 Answers 2

What you are receiving is an object whose properties are themselves objects. To iterate over those properties, you ca use Object.keys(), as in:

Object.keys(response).forEach((property) => {
    // Access each object here by using response[property]...
})

You may also need to convert the response from JSON first, but I'm sure you know how to do that.

The response from AXIOS is an JSON array? If yes, did you try to force the json response in AXIOS?

axios
  .get(
    "https://min-api.cryptopare./data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx",
    {
      responseType: 'json',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }
  )
  .then(...)

Apart of this, the way you iterate in render it would be better:

• Check if this.state.cryptos exists before iterate it.
• Put the key on the first-indented div on the iterator; ReactJs need it.
• Create an object iterator instead of a key iterator.

Render refactoring:

render() {
  if(this.state.cryptos.length === 0) return null;

  return (
    <div className="test">
      {this.state.cryptos.map((crypto, key) => (
        <div id="crypto-container" key={key}>
          <span className="left">{key}</span>
          <span className="right">
            <NumberFormat
              value={crypto.EUR}
              displayType={"text"}
              decimalPrecision={2}
              thousandSeparator={true}
              prefix={"€"}
            />
          </span>
        </div>
      ))}
    </div>
  );
}