TypeError: items is undefined while reading a json using fetch in reactjs

Question

This is the first time I'm working with APIs using ReactJS. I know the basics of reactjs pretty well but I'm unable to read the response. I've a json response from youtube api.

Initially i got

TypeError: items.map is not a function.

But then i realized that i might be getting an Object and not an array. I solved the problem by items: json.statistics. But now I'm getting other error i.e

TypeError: items is undefined

I just want to fetch 3 information viz viewCount, subscriberCount and videoCount. I've written this code

import React, {Component} from 'react';
import './App.css';

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

    componentDidMount() {
        fetch('https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCOYqNBjmWF8j-PzI7ZPjt_w&key=AIzaSyAMeZQW6sUQgLdDTnMVeokfbcFcT2A9SuA')
        .then(res => res.json())
        .then(json => {
            this.setState({
                isLoaded: true,
                items: json.statistics
            })
        });
    }

    render() {
        var {isLoaded, items} = this.state;
        if(!isLoaded) {
              return (<div>Loading...</div>)
        }
        else {
            return (
                <div>
                   <ul>
                      {
                         items.map(item => (
                           <li key={item.id}>
                              Total views: {item.viewCount} 
                              Total subscribers: {item.subscriberCount}
                              Total videos: {item.videoCount}
                           </li>
                        ))}
                    </ul>
                </div>
            )
          }
      }
   }

    export default App;

Please clarify what the 'other error' is that you're getting so the community can help — caladeve
– caladeve, Commented Aug 14, 2019 at 11:05
@caladeve. yes. myitems: json.items.statistics. But still i'm getting that error. I even changed the name of my variable so that it doesn't coincide with any other varibale of json response. — Tanzeel
– Tanzeel, Commented Aug 14, 2019 at 11:15

AxelJunes · Accepted Answer · 2019-08-14 11:26:23Z

2

It seems like the problem is in your setState(). Try something like this:

import React, { Component } from "react";
import "./styles.css";

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

  componentDidMount() {
    fetch(
      "https://www.googleapis.com/youtube/v3/channels?part=statistics&id=UCOYqNBjmWF8j-PzI7ZPjt_w&key=AIzaSyAMeZQW6sUQgLdDTnMVeokfbcFcT2A9SuA"
    )
      .then(res => res.json())
      .then(({ items }) => {
        this.setState({
          isLoaded: true,
          items
        });
      });
  }

  render() {
    var { isLoaded, items } = this.state;
    if (!isLoaded) return <div>Loading...</div>;
    return (
      <div>
        <ul>
          {items.map(({ id, statistics }) => (
            <li key={id}>
              Total views: {statistics.viewCount}
              Total subscribers: {statistics.subscriberCount}
              Total videos: {statistics.videoCount}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Also, you don't need an if else statement if you have a return. Either use a ternary operator or just remove the else.

Here's the sandbox if you want to take a look at it. Let me know if it helps.

edited Aug 14, 2019 at 11:26

answered Aug 14, 2019 at 11:17

AxelJunes

6561 gold badge6 silver badges15 bronze badges

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

4 Comments

Tanzeel Over a year ago

Its working perfectly. thanks. So I've to use {statistics} inside map. What difference will it make btw?

ravibagul91 Over a year ago

statistics object don't have id, this code will give warning for unique key.

AxelJunes Over a year ago

You're right. I've updated the answer so that it takes the id from items.

AxelJunes Over a year ago

@Tanzeel Using { statistics } in this case is the same as using items.statistics, because you're mapping over the items array. It's called destructuring in ES6. Check out this article which explains it very well.

ravibagul91 · Accepted Answer · 2019-08-14 11:16:02Z

1

You are getting data in items array, you need to set json.items in state,

this.setState({
    isLoaded: true,
    items: json.items
})

And then you will get statistics object data,

{
    items.map(item => (
        <li key={item.id}>
          Total views: {item.statistics.viewCount} 
          Total subscribers: {item.statistics.subscriberCount}
          Total videos: {item.statistics.videoCount}
        </li>
    ))
}

Demo

answered Aug 14, 2019 at 11:16

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

1 Comment

Tanzeel Over a year ago

oh. I'm so sorry I was either using Total views: {item.viewCount} or Total views: {statistics.viewCount} . I didn't realize that it has to be Total views: {item.statistics.viewCount}

Collectives™ on Stack Overflow

TypeError: items is undefined while reading a json using fetch in reactjs

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related