How to Use JSON Data with Plain Javascript and HTML

Last month I re-designed my personal website where I listed all the recent projects I worked on. It looked something like this.

<div class="project-cards-grid">
    <div>
        <h1>Project 1</h1>
        <h2>Client 1</h2>
        <div class="summary">Lorem ipsum</div>
        <div class="technologystack">
            <ul>
                <li>NodeJS</li>
                <li>AngularJS</li>
                <li>Bootstrap</li>
            </ul>
        </div>
    </div>
    <div>
        <h1>Project 2</h1>
        <h2>Client 2</h2>
        <div class="summary">Lorem ipsum</div>
        <div class="technologystack">
            <ul>
                <li>NodeJS</li>
                <li>AngularJS</li>
                <li>Bootstrap</li>
            </ul>
        </div>
    </div>
    <div>
        <h1>Project 3</h1>
        <h2>Client 3</h2>
        <div class="summary">Lorem ipsum</div>
        <div class="technologystack">
            <ul>
                <li>NodeJS</li>
                <li>AngularJS</li>
                <li>Bootstrap</li>
            </ul>
        </div>
    </div>
</div>

Then I thought, wouldn't it be nice if I can store all the project details in a JSON file and populate the webpage by reading from the JSON file.

JSON File

I created a JSON file data.json as follows:

[
    {
        "name": "Project 1",
        "client": "Client 1",
        "summary": "Lorem ipsum",
        "technologystack": ["NodeJS", "AngularJS", "Bootstrap"]
    },
    {
        "name": "Project 2",
        "client": "Client 2",
        "summary": "Lorem ipsum",
        "technologystack": ["NodeJS", "AngularJS", "Bootstrap"]
    },
    {
        "name": "Project 3",
        "client": "Client 4",
        "summary": "Lorem ipsum",
        "technologystack": ["NodeJS", "AngularJS", "Bootstrap"]
    }
] 

Next, I needed to read this JSON file from the javascript code and populate the DOM.

Access JSON file from Javascript

I used XMLHttpRequest() method to load data.json in my javscript code

const requestURL = 'data.json';
const request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = processData;
    
function processData() {
    const data = request.response;
    const projects = data.projects;
    populateProjectsCardGrid(projects);
}

function populateProjectsCardGrid(projects) {
    //...
}

Display the data in DOM

I removed the project related static code from the HTML page. Projects section in the HTML now looked like this.

<div class="project-cards-grid"></div>
        

populateProjectsCardGrid() function populated the DOM with the project data.

function populateProjectsCardGrid(projects) {
    const projectCardGrid = document.querySelector('.project-cards-grid');

    if (projects.length > 0) {
        projects.forEach(project => {
            const projectDiv = createElement('div', projectCardGrid);
            const titleH1 = createElement('h1', projectDiv);
            titleH1.textContent = project.name;
            
            const clientH2 = createElement('h2', projectDiv);
            clientH2.textContent = project.client;
            
            const summaryDiv = createElement(
                'div',
                projectDiv,
                'project-summary',
            );
            
            const summaryPara = createElement('p', summaryDiv);
            summaryPara.textContent = project.summary;
            
            if (
                project.technologystack !== undefined &&
                project.technologystack.length > 0
            ) {
                const technologyDiv = createElement(
                    'div',
                    projectDiv,
                    'project-technology',
                );
                const technologyUL = createElement('ul', technologyDiv);
                project.technologystack.forEach(item => {
                    const itemLI = createElement('li', technologyUL);
                    itemLI.textContent = item;
                });
            }
        });
    }
}

// createElement helper function
function createElement(type, parent, classList) {
    const element = document.createElement(type);
    if (classList !== undefined) {
        typeof classList === 'Array' && classList.length > 0
            ? element.classList.add(...classList)
            : (element.className = classList);
    }
    parent.append(element);
    return element;
}