Issue with fetching a raw JSON text URL

I’m trying to fetch a JSON text URL and parse it from text to .json format to use in this example website, but for some reason I can’t seem to get the right syntax to make it work.

I’ve tried this, then used JSON.parse() within the initialize function:

fetch('https://raw.githubusercontent.com/mdn/learning-area/main/javascript/apis/fetching-data/can-store/products.json')
  .then( response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.text();
  })
  .then( text => initialize(text) )
  .catch( err => console.error(`Fetch problem: ${err.message}`) );

Then I tried this:

fetch('https://raw.githubusercontent.com/mdn/learning-area/main/javascript/apis/fetching-data/can-store/products.json')
  .then( response => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.text();
  })
  .then( text => JSON.parse(text) )
  .then( json => initialize(json) )
  .catch( err => console.error(`Fetch problem: ${err.message}`) );

But neither of them worked. I’m continuing to get the error message in my console (“Fetch problem: …”). Does anyone have a solution?

The full source code is on my CodePen for a better understanding.

I assume you want JSON? Just use .json() on the response.

fetch(
  "https://raw.githubusercontent.com/mdn/learning-area/main/javascript/apis/fetching-data/can-store/products.json"
)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .then((products) => {
    document
      .querySelector("body")
      .insertAdjacentHTML(
        "beforeend",
        products.map((product) => `<p>${product.name}</p>`).join(" ")
      );
  })
  .catch((err) => console.error(`Fetch problem: ${err.message}`));

@lasjorg

return response.json();
})
.then( json => initialize(json) )

This is what I had at first but it didn’t work. Also, I tried your solution and that didn’t work either. When I tried to search up something from the JSON object array, the whole page just went blank and said “Not Found”.

Please show us the full code you wrote.

@RandellDawson The link to the full code is in the original post

I just looked at your Code pen and the code that was provided to you from @lasjorg for the first fetch worksfine.

That is because when the button is clicked, the page gets submitted (default behavior of a form with a form. e.preventDefault() does not do anything here. You can add type="button" to the button element to stop this.

Once that is fixed, you will not get that issue again but then nothing will really happen in your app because you never call the initialize function which is what adds the click event listener to the button, so when clicked selectCategory runs.`

Once you resolve the above, you will have a new problem in that when the update function is called from within initialize, you call a function named fetchBlob that takes a product as an argument. You build a url from product.image. The url you build references a local file. If that file is not present, then when you go to fetch it, you will throw an error due to fetch receiving a 404 error.

On Codepen, we do not have access to the local files, so we will see these errors in the console and showProduct will never be called. If you can put your project on GitHub or replit which has the images, then the fetchBlob.

Honestly, I do not know why you are even fetching the images. If you have them locally, then you can simply add the url to the src attribute of the images you create in showProduct. You do not need fetchBlob or any reference to blobs to get this work display the images.

@RandellDawson Well first of all, the code is not mine to begin with. It’s a demonstration of code from MDN that I copy and pasted from GitHub. This is the page that introduces the example website. The link to the source code is on that page as well. You can go ahead and take a look at it. I’m just taking the raw products.json file as text and trying to parse it into JSON format. The images that are being fetched are not even on my computer. I know I could just download the source files from the GitHub repository but I’m merely just testing the code out in CodePen. Just a little context to clear everything up.

Your code attempts to fetch a url based on a local image path. If those images are not there, the fetch will fail everytime it is called.

Either way, like I said before, there is no reason to fetch and create the image blobs. You just need to assign the image url located in product.image to src attribute of the image you create in showProduct. If the images do not exist locally, they will just not show but the code will not error out.

@RandellDawson
Okay, I know it’s been awhile, but I was finally able to fix the code I was trying to run. I used some of the feedback you gave on the path of the images. All the products now display perfectly.

Here’s the same link again to see the revised code: https://codepen.io/gijutaku/pen/OJwgJYX?editors=1010