Skip to content
Back
Web

Trouble loading in my projects using JSON

View on Discord

Votes

0

Replies

16

Participants

Unknown

Messages

17

Yama TOriginal post

Web Developer

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 ❤️

ZachHandley

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

ZachHandley

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

ZachHandley
JavaScript
your code goes here
ZachHandley
Yama T

Web Developer

ys i will try

Yama T

Web Developer

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

Markup
<!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>
Yama T

Web Developer

This is the page which isnt succesfull into loading JSON

Markup
<!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>
Yama T

Web Developer

I cannot send JSON because of message length in discord

Yama T

Web Developer

JSON
"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" }
        ]
    },
Yama T

Web Developer

JSON
{
  "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."
    }
  ],
Yama T

Web Developer

JavaScript
 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);
}
Yama T

Web Developer

JavaScript
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;
}
Yama T

Web Developer

JavaScript
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);
}
Drake

I'm not sure if you're handling the result of promise.all right...I don't think it's actually the JSON data. I think it's a promise result.

Anyways, how is this related to Appwrite?

Yama T

Web Developer

i thought this is a coding platform where i can ask help?

Drake

Appwrite is a backend server and this discord server is for our community of developers

Join the discussion

Reply to this thread by joining our Discord.

Reply on Discord

Need support?_

Join DiscordGet premium support