javascript - How to separate axios get array objects - Stack Overflow

admin管理员组

文章数量:1415145

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

Share Improve this question Follow asked Apr 29, 2019 at 8:21 AndrewAndrew 7311 gold badge33 silver badges1010 bronze badges 7

• 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

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 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.

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>
  );
}

本文标签： javascriptHow to separate axios get array objectsStack Overflow