Wow API CORB error for nesting api call

Hello, I am working on a project for school in Javascript (I currently have no backend knowledge, so using a server and caching this data is not an option for me).

It is basically a light wowhead, just a search bar to search for items. Here is the problem I am running into, the search API does not return the image media for each item. So I tried using a string template literal and passing the ID for each item into the url to get this image, but I am getting a CORB error and the image is failing to load.

Below is the link to my code (can’t post links so paste the following to the right of gist.github:

/Ezekias1337/082b5319bd29098fa10a8cad7c92376e

First of all, and most important: do not make your access_token public like you just did on the shared code, by doing so you are violating the APIs terms of service.

Please, edit your gist and/or any public repository and erase your access_token, after that go to the API credentials manager and re-generate your client secret so you can force previous tokens to expire.

Now to adress the problem:

The reason you are getting a CORB error is because you are passing the API media URL directly to an img element. This will never work because every API endpoint will return a JSON file, never a valid image format.

You must get one of the image URLs returned by the media endpoint and use that as the src attribute of your img element. Make sure to test any endpoint you want to use on the API docs page before trying to use them.

Edit: To give more technical details, take this media response:

{
  "_links": {
    "self": {
      "href": "https://us.api.blizzard.com/data/wow/media/item/19019?namespace=static-9.0.5_37760-us"
    }
  },
  "assets": [
    {
      "key": "icon",
      "value": "https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg",
      "file_data_id": 135349
    }
  ],
  "id": 19019
}

The URL you want to put on your img element is https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg like this:

<img src="https://render-us.worldofwarcraft.com/icons/56/inv_sword_39.jpg" />

so you must actually parse the returned json data before using it.

Unfortunately this can become very slow if the search term returns a lot of items, because for each item you would have to fetch the media, parse the response and return only the image URL.

It is possible to perform many concurrent requests in JS by spawning many fetch requests and waiting for them with Promise.all() but you would have to limit them at 100req/s or the API would fail, since it seems you are just a beginner, it should be easier to just limit the item search to return 10-20 items.

My apologies Schiller, I forgot to thank you for your help and detailed explanation. It has been extremely helpful and I have implemented the changes you mentioned.

Thank you for your constructive criticism, always looking to improve.