JSON from api not being displayed on ReactJS render method

Question

I am pretty new to ReactJS and am trying to figure out why I am not able to display the fetched data. Checked the data in Postman and it is as expected so I am sure there is something syntactical I am missing. I didnt put the key value in this post.

import React, { Component } from 'react'

class Stockstuff extends Component {
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

      componentDidMount() {
        fetch("https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=TSLA&apikey=???")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },

            (error) => {
              this.setState({
                isLoaded: true,
                error : true
              });
            }
          )
      }


      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item.name}>
                  {item.name} {item.price}
                </li>
              ))}
            </ul>
          );
        }
      }
}

export default Stockstuff

What is the fault?

@AmerllicA, the apikey in the query string is replaced by ???. @Ross Lamon, What is the expected payload? — faerin
– faerin, Commented Feb 22, 2020 at 19:13
@AmerllicA, how can you possibly know that the code is correct? What if items is not an iterable? — faerin
– faerin, Commented Feb 22, 2020 at 19:19
Dear @entiendoNull, exactly right, I assume the items exist on the response and it is an iterable object. The code is correct. the issue is not about ReactJS. — AmerllicA
– AmerllicA, Commented Feb 22, 2020 at 19:28
NEVER email your code to someone who appears to be trying to help. — Ian Kemp - SO dead by AI greed
– Ian Kemp - SO dead by AI greed, Commented Feb 22, 2020 at 19:33

artanik · Accepted Answer · 2020-02-22 19:17:53Z

The endpoint returns an object, not an array, that's why you can't map over it.

I open this URL from code https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=TSLA&apikey=???

Although it’s strange that it works with apikey=??? for me and I can see something like:

{
    "Meta Data": {
        "1. Information": "Monthly Prices (open, high, low, close) and Volumes",
        "2. Symbol": "TSLA",
        "3. Last Refreshed": "2020-02-21",
        "4. Time Zone": "US/Eastern"
    },
    "Monthly Time Series": {
        "2020-02-21": {
            "1. open": "673.6900",
            "2. high": "968.9899",
            "3. low": "673.5200",
            "4. close": "901.0000",
            "5. volume": "377921898"
        },
        "2020-01-31": {
            "1. open": "424.5000",
            "2. high": "653.0000",
            "3. low": "421.7100",
            "4. close": "650.5700",
            "5. volume": "407621638"
        },
        [...]
    }
}

I slightly changed the code to match the data and everything seems fine:

https://codesandbox.io/s/red-mountain-ipn3h

Ashley H. · Accepted Answer · 2020-02-22 19:36:59Z

0

I looked at the api endpoint and the structure of the data has no items key. So when you say results.items it's not returning anything. It looks like the two top-level keys for the object that is returned are "Meta Data" and "Monthly Time Series". You can't use dot notation for keys with spaces, so assuming you want the "Monthly Time Series" data, you'd want to do:

          ...

          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result["Monthly Time Series"]
              });
            },

          ...

ETA: it also doesn't return an array so you won't be able to use .map in your render function.

edited Feb 22, 2020 at 19:36

answered Feb 22, 2020 at 19:18

Ashley H.

7244 silver badges12 bronze badges

1 Comment

AmerllicA Over a year ago

You pass half way.

AmerllicA · Accepted Answer · 2020-02-22 20:01:55Z

0

Write your code like below:

import React, { Component } from 'react'

class Stockstuff extends Component {
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }

      componentDidMount() {
        fetch("https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=TSLA&apikey=???")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: Object.entries(result['Monthly Time Series'])
              });
            },

            (error) => {
              this.setState({
                isLoaded: true,
                error : true
              });
            }
          )
      }


      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item[0]}>
                  <span>{item[1].open}</span>
                  <span>{item[1].high}</span>
                  <span>{item[1].low}</span>
                  <span>{item[1].close}</span>
                  <span>{item[1].volume}</span>
                </li>
              ))}
            </ul>
          );
        }
      }
}

export default Stockstuff;

answered Feb 22, 2020 at 20:01

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

3 Comments

artanik Over a year ago

Hey, you just posted a "slightly changed" version of my code from codesendbox example. Is this okay on StackOverflow? 🤔

AmerllicA Over a year ago

Dear comrade @artanik, I didn't see your code yet. I just write my sight. If you think I steal your codes, please flag my post and report it. But I swear I didn't see your link yet.

artanik Over a year ago

I won't flag your answer, apparently Object.entries is an obvious answer to this question and you also came up with this idea, and that's totally fine :)

Collectives™ on Stack Overflow

JSON from api not being displayed on ReactJS render method

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related