45

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 :

readJson () {
   console.log(this)
   let vm = this
   // http://localhost:8080
   fetch('/Reading/api/file').then((response) => response.json()).then(json => {
       vm.users = json
       console.log(vm.users)
   }).catch(function () {
       vm.dataError = true
   })
}

So, What must to do to read local json file in this fetch function?

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
BRRusev
  • 525
  • 2
  • 6
  • 12
  • 5
    Side note: Your `fetch` call is missing a check on `response.ok`; this is such a common error I wrote up [a blog post about it](http://blog.niftysnippets.org/2018/06/common-fetch-errors.html). – T.J. Crowder Aug 15 '18 at 13:13

2 Answers2

43

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:

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    The example makes it look like it's being served at `http://localhost:8080/Reading/api/file`, so I'm not sure this answer is applicable. – zzzzBov Aug 15 '18 at 13:13
  • 1
    @zzzzBov - I **totally** missed that comment in the source, thanks. But it sound slike the OP may be hosting the *page* there, but trying to read a local file, not a file on the server. – T.J. Crowder Aug 15 '18 at 13:14
  • Yea, it's certainly ambiguous. I have a hunch that this is a dupe of ["How do I return the response from an asynchronous call?"](https://stackoverflow.com/q/14220321/497418). – zzzzBov Aug 15 '18 at 13:15
  • @zzzzBov - Could well be. I've fixed the answer, thanks again. – T.J. Crowder Aug 15 '18 at 13:17
20

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
});
Barr J
  • 10,636
  • 1
  • 28
  • 46