Relative paths with fetch in Javascript

I was surprised by an experience with relative paths in Javascript today. I’ve boiled down the situation to the following:

Suppose you have a directory structure like:

app/
   | 
   +--app.html
   +--js/
        |
        +--app.js
        +--data.json

All my app.html does is run js/app.js

<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>

app.js loads the JSON file and sticks it at the beginning of body:

// js/app.js
fetch('js/data.json') // <-- this path surprises me
  .then(response => response.json())
  .then(data => app.data = data)

The data is valid JSON, just a string:

"Hello World"

This is a pretty minimal usage of fetch, but I am surprised that the URL that I pass to fetch has to be relative to app.html instead of relative to app.js. I would expect this path to work, since data.json and app.js are in the same directory (js/):

fetch('data.json') // nope

Is there an explanation for why this is the case?

59 thoughts on “Relative paths with fetch in Javascript”

  1. With havin so much content and articles do you ever run into any issues of plagorism or copyright infringement?

    My website has a lot of completely unique content I’ve either authored myself or outsourced but it looks like a lot of it is popping it up all over the internet without my authorization. Do
    you know any methods to help protect against content from being ripped off?
    I’d genuinely appreciate it.

    Reply
  2. I’m extremely impressed with your writing skills as well as
    with the layout on your blog. Is this a paid
    theme or did you customize it yourself? Anyway keep up
    the nice quality writing, it is rare to see a great blog like this one nowadays.

    Reply
  3. You’re so interesting! I don’t believe I’ve truly read through a
    single thing like that before. So good to find another person with unique thoughts on this topic.

    Really.. many thanks for starting this up. This web site is one thing
    that is needed on the internet, someone with a bit of originality!

    Reply
  4. Please let me know if you’re looking for a author for your blog.
    You have some really good articles and I believe I would be a good asset.
    If you ever want to take some of the load off, I’d love to write some material
    for your blog in exchange for a link back to mine. Please blast me an email
    if interested. Many thanks! quest bars http://j.mp/3jZgEA2 quest bars

    Reply
  5. An impressive share! I have just forwarded this onto a co-worker who
    has been conducting a little homework on this.
    And he in fact bought me dinner because I stumbled upon it for him…

    lol. So allow me to reword this…. Thank
    YOU for the meal!! But yeah, thanks for spending time to talk
    about this topic here on your web page. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply
  6. Howdy! Someone in my Facebook group shared this site with us so I came to give it a look.
    I’m definitely enjoying the information. I’m bookmarking and will be tweeting this
    to my followers! Fantastic blog and fantastic style
    and design.

    Reply