How to separate axios get array objects

Question

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: []
    };
  }

  componentDidMount() {
    axios
      .get(
        "https://min-api.cryptocompare.com/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;

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

Marcus · Accepted Answer · 2019-04-29 08:51:53Z

3

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.

answered Apr 29, 2019 at 8:51

Marcus

2,3612 gold badges18 silver badges22 bronze badges

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

1 Comment

terminus.technicus Over a year ago

This works find unless you need later to delete (actually, splice()) elements of the array. You can delete object members with delete response[property], but in the object the "indexes" (that is, keys) do not change.

Situ · Accepted Answer · 2019-04-29 08:46:19Z

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.cryptocompare.com/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>
  );
}

Collectives™ on Stack Overflow

How to separate axios get array objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related