Search code examples
javascriptjsonfrontend

fetching JSON breaks website and doesn't display content properly

I have a website with a lot of pictures. They have the same code with some changes. I figured I could use an array with objects to render the content more easily without writing the same HTML over and over again. So I wrote a simple code to .map() the objects and return a string and then .join('') the strings. Now it works perfectly with using just the JS, but when I tried to use JSON, it kinda breaks. The JSON is parsed correctly and my function returns the correct code to be inserted into the HTML, but when I load the page, nothing is there. I can see it in the inspector, but nothing visible on the page...

My Code:

const paintingSection = document.querySelector(".painting-div-container");

const loadPictures = (picturesArr) => {
  paintingSection.innerHTML = picturesArr
    .map(
      (picture) =>
        `
<div class="painting-container ${picture.align} scroll-hidden">
  <div class="text-container">
    <h3 class="absolute pain-head">${picture.heading}</h3>
    <p class="absolute pain-info">${picture.description}</p>
  </div>
    <img
      src="../../media/obrazy/v-zajeti-barev-2/${picture.fileName}"
      alt="${picture.alt}"
      class="painting"
      
    />
</div>
`
    )
    .join("");
};

fetch("./paintings.json")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok " + response.statusText);
    }
    return response.json();
  })
  .then((data) => {
    loadPictures(data);
  })
  .catch((error) => {
    console.error("Error fetching the JSON file:", error);
  });

ps: I know the HTML isn't perfect, but I'm too lame to change everything now...

The JSON:

[
  {
    "heading": "A jako Anděl - 2013",
    "description": "akryl na šepsované desce, 50x60",
    "fileName": "A-JAKO-ANDĚL.jpg",
    "alt": "A jako anděl - obraz",
    "align": "vert"
  },
  {
    "heading": "Barevná láska - 2013",
    "description": "akryl na plátně, 100x130",
    "fileName": "Barevná-láska-2.jpg",
    "alt": "Barevná láska 2 - obraz",
    "align": "hori"
  }
]

The output I got: enter image description here

Expected output: enter image description here

I did try console.logging everything and it is correct. Even in the HTML everything is as it should be yet still, no display basically. I did get one error from a different part of my code saying that the img is undefined. Could be because it's not waiting for the parse to happen...

The HTML I got:

<div class="painting-container vert scroll-hidden">
  <div class="text-container">
    <h3 class="absolute pain-head">A jako Anděl - 2013</h3>
    <p class="absolute pain-info">akryl na šepsované desce, 50x60</p>
  </div>
    <img src="../../media/obrazy/v-zajeti-barev-2/A-JAKO-ANDĚL.jpg" alt="A jako anděl - obraz" class="painting">
</div>
Solution

  • The issue was that I had a scroll-hidden class setup, which set the opacity to 0. I also had a script, which has an intersection observer that is checking if the element is visible and if so, it removes this class making the scroll animation. But the script was running before any content was loaded with the JSON. So the querySelectorAll() loaded no elements.

    Fixed by making functions for everything that needs to wait for the JSON and calling it in the .then()