0

Suppose my current file structure with 3 following files is:

main/index.html  
main/res/json/myjson.json  
main/src/js/script.js

this is in my index header:

<script type="text/javascript" src="src/js/script.js"></script>

In my JavaScript file, I try to fetch the json file with these lines:

 fetch('../../res/json/mjson.json')
        .then((response)
        .then(json => {
       
       ...
       ...

I run the index.html with a live server plugin for VSCode. However, no matter what I do, it returns me a 404 Not Found error that the json resource is not found. Absolute path gives an error aswell, cannot test my script with than even. Any solutions to this besides hosting an API?

VLAZ
  • 26,331
  • 9
  • 49
  • 67
RCWZX
  • 53
  • 8
  • To work out the correct URL it is important to know **(a)** The URL of the HTML document and **(b)** The directory that live-server is mapping onto the HTTP path `/` – Quentin Oct 20 '22 at 13:05
  • "Absolute path gives an error aswell" — What absolute path are you using? Is it the same error? – Quentin Oct 20 '22 at 13:05

1 Answers1

2

Why are these here?: ../../

Consider how you reference the JavaScript file from your page:

src/js/script.js

Reference the JSON file the same way:

res/json/myjson.json

Both are relative to the URL of the page shown in the browser.

David
  • 208,112
  • 36
  • 198
  • 279
  • tried it before, tried again - still doesn't work, a 404 not found error given. – RCWZX Oct 20 '22 at 13:12
  • @RCWZX: What is the exact URL of the page in the browser? In the browser's debugging tools, when the request is made for the JSON file, what is the exact URL of that request? What *should* the URL of that JSON file be? (That is, if you directly access it manually, what URL do you use?) – David Oct 20 '22 at 13:14
  • For example, with index, the url is: http://127.0.0.1:5500/index.html, with the javascript file, the url is: http://127.0.0.1:5500/src/js/script.js. I have a css file like this: main/rsc/css/style.css. This is accessed with http://127.0.0.1:5500/res/css/script.js easily. However, with http://127.0.0.1:5500/res/json/myjson.json I still get "Cannot GET /res/json/myjson.json" – RCWZX Oct 20 '22 at 13:19
  • @RCWZX: How does the URL `127.0.0.1:5500/res/css/script.js` map to the file `main/rsc/css/style.css`? There's something more going on with this web server than shown in the question... – David Oct 20 '22 at 13:21
  • Uhhh, let me find out – RCWZX Oct 20 '22 at 13:29
  • I still have no idea, by looking at every request it finds every other file except this one. – RCWZX Oct 20 '22 at 13:32
  • 1
    @RCWZX: It sounds like you may need to try with a new fresh project or otherwise investigate what's happening a bit further. Because I can't think of any reason why the URL `/res/css/script.js` should map to the file `/rsc/css/style.css`. The paths and file names are completely different. Which implies either (1) that same seemingly random file mapping could mean the JSON file's URL could be *anything*, or (2) you're making a variety of typos and mistakes in your debugging and analysis and we can't really fix that. – David Oct 20 '22 at 13:34
  • I'm sorry, I made a typo indeed in the original comment. Script is still accessed with 127.0.0.1:5500/src/js/script.js and the css file is accessed with 127.0.01:5500/rsc/css/style.css. All the mapping is correct. A typo in the original comment. – RCWZX Oct 20 '22 at 13:40
  • 1
    @RCWZX: Maybe the `res` folder isn't being included in the server output for some reason? Try moving the JSON file to folders which are known to be included, perhaps placing it side-by-side with the JavaScript file. Take care also to double-check all of this for other typos you've made in the code which could be causing the problem... – David Oct 20 '22 at 13:42
  • Found my error, indeed a small typo. Sorry to concern you withit. Just 2 letters that are hard to distinguish were switched. Will close the thread. Thank you still ofcourse, learned about the pathing. – RCWZX Oct 20 '22 at 13:45