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 }

Doesn't seem to work, it just returns 'function json()' when I log response.json @zero298 — danielo
– danielo, Commented Mar 5, 2018 at 17:37
Call it with .json() using parentheses. See my answer. — zero298
– zero298, Commented Mar 5, 2018 at 17:38
Also, seeing file:// in the URL of the response worries me. How are you serving this content? Does the URL in your address bar have file:// in it? — zero298
– zero298, Commented Mar 5, 2018 at 17:41

zero298 · Accepted Answer · 2018-03-05 17:38:22Z

2

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

answered Mar 5, 2018 at 17:38

zero298

27.1k10 gold badges80 silver badges109 bronze badges

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

Collectives™ on Stack Overflow

Javascript - Vue js fetch from file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related