Update information on static HTML website from data.json file-CodePudding

I am trying to add a feature to my website to dynamically update information by pulling it from the data.json file. Currently, I am manually copying and pasting the information into the desired cards, and the process is very tedious, even though it's the same piece of code. It would be handy if I could just store the information in the data.json file, and the website automatically updates the main HTML code to match the updated information. I have some code written, but it doesn't work as expected.

Here is the function for updating the content on the website

$(document).ready(function() {
    $.getJSON('./data/data.json', function(data) {

        for (var i = 0; i < data.projects.length; i  ) {
            
            $('#project').addClass(data.projects[i].section);
            $('#project-image').attr('src', data.projects[i].image);
            $('#project-title').html(data.projects[i].title);
            $('#project-blurb').html(data.projects[i].blurb);
            $('#project-link').prop('href', data.projects[i].link);
        }  
    });
});

this is the information from the data.json file

"projects": [
        {
            "title": "Stock Game",
            "section": "mobileapp",
            "image": "assets/images/project/StockGame.png",
            "link": "https://github.com/StockGame",
            "blurb": "Stock game is a python program"
        },
        {
            "title": "Real Time Translator",
            "section": "mobileapp",
            "image": "assets/images/project/RT-Translator.jpg",
            "link": "https://github.com/RT-Translator",
            "blurb": "Real Time Translator is a tool that can"
        },

This is the card that I want to dynamically update every time the website is opened, and the data is pulled from the data.json file.

<div  id="project" >
                        <div >
                            <div >
                                <div >
                                    <img id="project-image"  alt="image">
                                </div>
                                <div >
                                    <div >
                                        <h5  id="project-title"></h5>
                                        <p  id="project-blurb"></p>
                                    </div>
                                </div>
                            </div>
                            <div >
                                <a  id="project-link"></a>
                                <div >
                                    <a  id="project-link">
                                        <i ></i>View Project
                                    </a>
                                </div>
                            </div><!--//link-mask-->
                        </div><!--//card-->
                    </div><!--//col-->

Currently, the code only shows one of the 7 projects, and the project-link id also doesn't work, meaning it doesn't redirect to my GitHub page. It would be wonderful if you guys could help me figure out how to integrate this with my website and make it not as tedious when I have to delete or add a new project. Thanks in advance.

CodePudding user response：

In each iteration, you are targeting and updating the same set of HTML elements. For instance, using $('#project') to update the class and $('#project-image'), $('#project-title'), $('#project-blurb'), and $('#project-link') will result in modifying the same set of elements every time.

For multiple projects, you need to generate HTML dynamically for each project and append it to the DOM to display all the projects properly.

You can try the following way:

$(document).ready(function() {
$.getJSON('./data/data.json', function(data) {

    var projectContainer = $('#project');

    data.projects.forEach(function(project) {
        var projectCard = `
          <div >
            <div >
                <div >
                    <div >
                        <img  src="${project.image}" alt="${project.title}">
                    </div>
                    <div >
                        <div >
                            <h5 >${project.title}</h5>
                            <p >${project.blurb}</p>
                        </div>
                    </div>
                </div>
                <div >
                    <a href="${project.link}"  target="_blank"></a>
                    <div >
                        <a href="${project.link}"  target="_blank">
                            <i ></i>View Project
                        </a>
                    </div>
                </div>
            </div>
          </div>`;
        
        projectContainer.append(projectCard);
    });
  });
});