How to read JSON file with fetch() in javascript?

Question

How can I read local JSON file with fetch function in javascript? I have JSON file with some dump data and one function which read JSON file on server. For example :

Answer 1

There is the very simple Fetch API:

you use it simply by:

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

Answer 2

How can I read local JSON file with fetch function in javascript?

If you're trying to read http://localhost:8080/Reading/api/file

...then what you're doing is correct except you're missing the .ok check (this is such a common mistake I've written a blog post about it). Also, since you're using arrow functions, you don't need to do let vm = this; unless you prefer it; arrow functions close over this. So:

readJson () {
   // http://localhost:8080
   fetch('/Reading/api/file')
   .then(response => {
       if (!response.ok) {
           throw new Error("HTTP error " + response.status);
       }
       return response.json();
   })
   .then(json => {
       this.users = json;
       //console.log(this.users);
   })
   .catch(function () {
       this.dataError = true;
   })
}

It's important to remember that this is asynchronous; readJson returns before this.users has the value; it will get it later. If you want to know when it gets it, return the promise so calling code can use then on it:

readJson () {
   // http://localhost:8080
   return fetch('/Reading/api/file')
   // ...

More in the answers to these questions:

• How do I return the response from an asynchronous call?
• Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

If you're trying to read /Reading/api/file from the file system

...then you can't, in at least some browsers, unless you serve the file via a web server process (as you appear to be serving the page. Then you read it via a URL on that server process as shown above.

To read a local file otherwise, the user has to identify the file, either by picking it in an input type="file" or dragging it into a dropzone. Then you'd read it via the File API, not fetch.