Javascript - Vue js fetch from file

Question

I am just learning Vue js and are using it in the simplest possible way by including the source code in the end of the html. Now I am trying to do an ordinary JavaScript fetch like this:

fetch('./json_docs/example.json')
   .then(function(response) {
      return response;
   })
   .then(function(res) {
      console.log(res);
  });

The response I get looks like this but I don't get the actual data back. When I try using the URL to the file that's included in the response in the browser the data shows. Does anyone know what I am doing wrong?

Response { type: "basic", url: "file:///Users/danielamir/Documents/…", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }

Answer 1

You need to actually call .json on the response:

fetch('./json_docs/example.json')
   .then(function(response) {
      return response.json(); // As a function call
   })
   .then(function(data) {
      console.log(data);
  });

See Making Fetch Requests