Cannot fetch local json file, file path error (using a live server already)

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?

>Solution :

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.