Trouble loading in my projects using JSON

I have 2 pages which should load in my projects from a JSON file. Sadly only 1 of them works as its supposed to. I could use some help making the other page work aswell.

The learnings page shows the projects, loaded from JSON, correctly

The onderzoek page doesnt show the projects correctly.

The javascript code is where i try to load in my projects.

I would really appreciate some advice or even help ❤️

TL;DR

The user is experiencing trouble loading projects from a JSON file on one of their pages. The JavaScript code appears to be correctly fetching the JSON data using a Promise.all method. There is an `initializePage` function that sets up the learning outcomes on the page and a `loadContent` function that updates the main content based on the selected learning outcome. The user wants help in making the second page load the projects correctly. The HTML structure of the second page is provided. The solution could involve checking for any errors in the JSON structure or ensuring that the correct data is being accessed and displayed on the second page.

@Yama T can you post your code itself and not screenshots

e.g. use three ` backticks plus whatever language e.g. so

TypeScript

your code goes here

ys i will try

This is the page which is succesfull in loading in my projects using JSON

TypeScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="globals.css" />
    <link rel="stylesheet" href="style.css" />
    <title>Bewijslast</title>
</head>
<body>

    <div id="sidebar">
        <div id="scroll-wheel"></div>
    </div>

    <div id="main-content"></div>

    <script src="script.js"></script>

</body>
</html>

This is the page which isnt succesfull into loading JSON

TypeScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Onderzoek Documentatie</title>
</head>
<body>
    <h1 id="title">Onderzoek Documentatie</h1>
    <div class="section" id="onderzoeksvraag">
        <h2>Onderzoeksvraag</h2>
        <p id="onderzoeksvraagContent"></p>
    </div>
    <div class="section">
        <h2>1. Aanleiding</h2>
        <p>Statische tekst over de aanleiding.</p>
    </div>
    <div class="section" id="methodes">
        <h2>2. Methodes</h2>
        <p id="methodesContent"></p>
    </div>
    <div class="section">
        <h2>3. Resultaat</h2>
        <p id="resultaatContent"></p>
        <div class="appendix" id="appendixContent">
            <h3>Appendix</h3>
            <p id="appendixText"></p>
            <img src="" alt="Afbeelding 1" id="image1">
            <img src="" alt="Afbeelding 2" id="image2">
            <video controls id="video1">
                <source src="" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <video controls id="video2">
                <source src="" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <!-- Voeg hier meer afbeeldingen en video's toe zoals nodig -->
        </div>
    </div>
    <div class="section">
        <h2>4. Conclusie</h2>
        <p id="conclusieContent"></p>
    </div>
    <div class="section">
        <h2>5. Aanbeveling</h2>
        <p id="aanbevelingContent"></p>
    </div>
    <div class="section">
        <h2>6. Bronnen</h2>
        <p id="bronnenContent"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

I cannot send JSON because of message length in discord

TypeScript

"projectsData": [
    {
      "name": "Doelgroep Analyse V1",
      "description": "Persoonlijke Portfolio",
      "learningOutcome": "Learning outcome 1: User interaction (analysis & advice)",
      "link": "/onderzoeken/doelgroepanalyse.html",
      "onderzoeksvraag": "Wat is de impact van A op B?",
      "methodes": "Ik heb een combinatie van enquêtes en interviews gebruikt.",
      "resultaat": "De resultaten tonen aan dat...",
      "appendixText": "Extra informatie in de appendix.",
      "conclusie": "Op basis van de resultaten kan geconcludeerd worden...",
      "aanbeveling": "Voor toekomstig onderzoek zou het interessant zijn om...",
      "bronnen": "Doe, J. (2021). Nieuwe benaderingen in onderzoek.",
        "images": [
          { "name": "Image 1", "path": "/images/image1.jpg" },
          { "name": "Image 2", "path": "/images/image2.png" }
        ],
        "videos": [
          { "name": "Video 1", "path": "/videos/video1.mp4" },
          { "name": "Video 2", "path": "https://example.com/videos/video2.mp4" }
        ]
    },

TypeScript

{
  "learningOutcomes": [
    {
      "title": "Learning outcome 1: User interaction (analysis & advice)",
      "description": "You analyse the user, the interaction, and the user experience, also taking state of the art interactive technologies into account. You select a suitable design process to be able to advise on UX interventions based on a validated UX design."
    },
    {
      "title": "Learning outcome 2: User interaction (execution & validation) ",
      "description": "You execute and evaluate the user experience of an interactive product. You document the development process for the stakeholders."
    },
    {
      "title": "Learning outcome 3: Software design and realisation ",
      "description": "You create & design software with existing components or libraries using predetermined quality criteria and version control."
    },
    {
      "title": "Learning outcome 4: Future-oriented organisation ",
      "description": "You carry out a problem analysis and on that basis, you determine the definitive problem and elaborate on this in a project plan."
    },
    {
      "title": "Learning outcome 5: Investigative problem solving",
      "description": "You formulate sub-questions pertaining to the primary question and answer these using relevant research methods. You use the conclusions of the sub-questions to justify (design) choices."
    },
    {
      "title": "Learning outcome 6: Personal leadership ",
      "description": "You methodically reflect on your professional identity and personal development."
    },
    {
      "title": "Learning outcome 7: Goal-oriented interaction ",
      "description": "You communicate with different stakeholders and team members about the ICT assignment, taking into account an international context."
    }
  ],

TypeScript

 loadContent(learningOutcomes[0], projectsData);
}

function loadContent(learningOutcome, projectsData) {
    const allOutcomes = document.querySelectorAll('.learning-outcome');
    allOutcomes.forEach(outcome => outcome.classList.remove('active'));
    const selectedOutcome = Array.from(allOutcomes).find(outcome =>
        outcome.textContent.trim().toLowerCase() === learningOutcome.title.trim().toLowerCase()
    );
    selectedOutcome.classList.add('active');

    const mainContent = document.getElementById('main-content');
    mainContent.innerHTML = `
        <div class="learning-outcome-container fade-in-up">
            <h2 class="scale-in">${learningOutcome.title}</h2>
            <p class="fade-in">${learningOutcome.description}</p>
        </div>
    `;

    const projectsContainer = document.createElement('div');
    projectsContainer.id = 'projects-container';

    const filteredProjects = projectsData.filter(project =>
        project.learningOutcome.trim().toLowerCase() === learningOutcome.title.trim().toLowerCase()
    );

    filteredProjects.forEach(project => {
        const projectLink = document.createElement('a');
        projectLink.href = project.link;
        projectLink.target = '_blank';

        const projectCard = document.createElement('div');
        projectCard.classList.add('project-card', 'fade-in-up');
        projectCard.innerHTML = `
            <h3 class="fade-in">${project.name}</h3>
            <p class="fade-in">${project.description}</p>
        `;

        projectLink.appendChild(projectCard);
        projectsContainer.appendChild(projectLink);
    });

    mainContent.appendChild(projectsContainer);
}

TypeScript

function updatePageContent(data) {
    document.getElementById('onderzoeksvraagContent').textContent = data.onderzoeksvraag;
    document.getElementById('methodesContent').textContent = data.methodes;
    document.getElementById('resultaatContent').textContent = data.resultaat;
    document.getElementById('appendixText').textContent = data.appendixText;

    // Vul hier de gegevens in voor afbeeldingen en video's zoals nodig
    document.getElementById('image1').src = data.images[0].path;
    document.getElementById('image2').src = data.images[1].path;
    document.getElementById('video1').src = data.videos[0].path;
    document.getElementById('video2').src = data.videos[1].path;

    document.getElementById('conclusieContent').textContent = data.conclusie;
    document.getElementById('aanbevelingContent').textContent = data.aanbeveling;
    document.getElementById('bronnenContent').textContent = data.bronnen;
}

TypeScript

document.addEventListener('DOMContentLoaded', function () {
    // Fetch beide JSON-bestanden parallel
    Promise.all([fetch('projects.json').then(response => response.json()), fetchAndParseJson('projects.json')])
        .then(([projectsData, jsonData]) => {
            initializePage(projectsData);
            updatePageContent(jsonData);
        })
        .catch(error => console.error('Error fetching data:', error));
});

function fetchAndParseJson(url) {
    return fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });
}

function initializePage(data) {
    const learningOutcomes = data.learningOutcomes;
    const projectsData = data.projectsData;

    const scrollWheel = document.getElementById('scroll-wheel');
    learningOutcomes.forEach((outcome, index) => {
        const outcomeDiv = document.createElement('div');
        outcomeDiv.classList.add('learning-outcome');
        outcomeDiv.textContent = outcome.title;
        scrollWheel.appendChild(outcomeDiv);
        outcomeDiv.addEventListener('click', () => loadContent(outcome, projectsData));
    });

    loadContent(learningOutcomes[0], projectsData);
}