How to fetch values from a JSON file with JS?

[asterhalloween]

Hello, everybody! I'm looking for a bit of help on how to do this thing because honestly I don't really know much about JavaScript (like almost nothing actually. dont let my yapping fool you) and as much messing around I've been doing I haven't been able to figure this out.

So, I want to create a Webring where people have little pixel bugs to help the ecosystem of their website. I'm using onionring as a base but for the widget I want to be able to automatically display the user's bug image as well as its name. A similar Webring I've seen is the jellyworld webring, which uses a JSON file to store the Webring members and their name, jelly, etc. and it puts it on the widget automatically by fetching the values based off of the url. It runs a bit different than the onionring system and so there are a few conflicting things with the system, but I don't particularly see why it wouldn't be possible to adapt onionring to do something similar, I just don't know how I would go about doing that.

I'm going to link the relevant files below, I haven't changed it much from the base template but thats because I removed all my attempts at getting it to work before because it kinda.. broke the whole thing

https://asterhalloween.neocities.org/buggyfriends/onionring-widget.js <- the thing that makes the widget and ideally would fetch from the json file
https://asterhalloween.neocities.org/buggyfriends/buggyfriends.json <- the json file
https://asterhalloween.neocities.org/buggyfriends/onionring-variables.js <- currently is what contains the urls. but i also yoinked the const so it gets the json
https://asterhalloween.neocities.org/buggyfriends/onionring-index.js <- I dont know if this will be useful at all for figuring this out but im linking it just incase ok

[candycanearter07]

Looking it up, its actually really simple! fetch() has a special thing to parse JSON data to an object, and the fetch syntax is pretty easy. the only caveot is you need to define the function its in as an async function, or it will yell at you.

Code

async function funcNamewhatever() {
  let res = await fetch("yoursite.com/assets/whatever/file.json");
  if (!res.ok)
    { throw new Error(`HTTP Error while getting file: ${res.status}`); }

  let json = await res.json();
  return json;
}

also, the webring sounds super cute and i want to join :D