I have been trying to use Fetch to get data from an external json file with react but kept getting errors

Question

i keep getting this errors in my console

index.js:1375 SyntaxError: Unexpected token < in JSON at position 0

here is my code

import React, { Component } from "react";

class Users extends Component {
  state = {};
  ftUsers() {
    fetch("./components/data/users1.json")
      .then((res) => res.json())
      .then((resData) => {
        console.log(resData.res);
      })
      .catch((err) => console.error(err));
  }
  render() {
    return (
      <div>
        <h2>Users Lists</h2>
        <p>{this.ftUsers()}</p>
      </div>
    );
  }
}

export default Users;

Is this a local JSON file? Can you update your question to include it? Run it through a [JSON linter](https://jsonlint.com/) to validate it? "<" isn't a valid starting character. — Drew Reese, Apr 28 '20 at 07:35

score 0 · Answer 1 · answered Apr 28 '20 at 07:49

Refer the link Relative paths with fetch in Javascript

When you are using fetch the file should be served via the server. So correct the path of url.

If your json file is inside components/data and you are serving your file from the root folder. The fetch path should be according to this.

fetch("components/data/users1.json")

Relative paths are used for imports in React. Not AJAX requests.

I have been trying to use Fetch to get data from an external json file with react but kept getting errors

1 Answers1