Uncaught (in promise) SyntaxError: Unexpected token in React

Question

i got this error

VM305:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

and I don't know why. My json data:

[
  {
   "id": 1,
    "title": "Avatar",
    "distributor": "20th Century Fox",
    "year": 2009,
    "amount": "$2,787,965,087",
    "img": {
      "src": "media/avatar.jpg",
      "alt": "avatar"
    },
    "ranking": 1
  },
  {
    "id": 2,
    "title": "Titanic",
    "distributor": "20th Century Fox",
    "year": 1997,
    "amount": "$2,187,463,944",
    "img": {
      "src": "media/titanic.jpg",
      "alt": "titanic"
    },
    "ranking": 2
  },
  {
    "id": 3,
    "title": "Star Wars: The Force Awakens",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2015,
    "amount": "$2,068,223,624",
    "img": {
      "src": "media/star_wars_the_force_awakens.jpg",
      "alt": "star_wars_the_force_awakens"
    },
    "ranking": 3
  },
  {
    "id": 4,
    "title": "Avengers: Infinity War",
    "distributor": "Walt Disney Studios Motion Pictures",
    "year": 2018,
    "amount": "$2,048,359,754",
    "img": {
      "src": "media/avengers_infinity_war.jpg",
      "alt": "avengers_infinity_war"
    },
    "ranking": 4
  },
  {
    "id": 5,
    "title": "Jurassic World",
    "distributor": "Universal Pictures",
    "year": 2015,
    "amount": "$1,671,713,208",
    "img": {
      "src": "media/jurassic_world.jpg",
      "alt": "jurassic_world"
    },
    "ranking": 5
  }
]

class List extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loading: true,
    };
  }

  async componentDidMount() {
    
    const movies = await fetch('../../assets/data.json');
    const moviesJSON = await movies.json();
  
    console.log(moviesJSON);
    if (moviesJSON) {
      this.setState({
        data: moviesJSON,
        loading: false,
      });
    }
  }

  render() {
    const { data, loading } = this.state;

    if (loading) {
      return <div>Loading...</div>;
    }

    return (
      <div className='row'>
        {data.map(movie => (
          <div key={movie.id} className='col-sm-2'>
            <Card movie={movie} />
          </div>
        ))}
      </div>
    );
  }
}

export default List;

Christian Fritz · Accepted Answer · 2021-04-29 17:11:10Z

2

The URL where you are fetching the json is almost certainly not returning the json file that you think it is, but instead serving an HTML error page (which starts with <). Add a console.log(movies) after the fetch to debug this.

Also, the URL you have is a path (including ..), not a URL. The question is where that file is served by your web server.

answered Apr 29, 2021 at 17:11

Christian Fritz

21.5k3 gold badges49 silver badges82 bronze badges

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

1 Comment

Ayaz Over a year ago

Agreed Christian.

Ravi Theja · Accepted Answer · 2021-04-29 17:16:31Z

1

const movies = await fetch('../../assets/data.json');

instead of doing this, you should import json at the top of your file

import movies from '../../assets/data.json';

Then you can access movies in ComponentDidMount. Since it is local data, you don't need to make an api call

answered Apr 29, 2021 at 17:16

Ravi Theja

3,4111 gold badge25 silver badges34 bronze badges

Comments

Ayaz · Accepted Answer · 2021-04-29 17:20:04Z

1

You get this error when fetch doesn't return valid json data. This is the line causing the error.

const moviesJSON = await movies.json();

You can try to change movies.json() to movies.text() and log to see the data.

const moviesJSON = await movies.text();
console.log((moviesJSON));

answered Apr 29, 2021 at 17:20

Ayaz

2,1314 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

Uncaught (in promise) SyntaxError: Unexpected token in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related