var obj = JSON.parse(portfolioData.json);

function appendData(data) {

    var code = "";

    for (var i = 0; i < data.length; i++) {

        var current = data[i];

        code = code + '<div class="post flexbox"> <div class="column20 ver-center" style="margin-right: 30px;">';
        code = code + '<h6>' + current.date[0] + '<br>' + current.date[1] + '<br>' + current.date[2] + '</h6></div>';
        code = code + '<div class="column80 ver-center">';
        code = code + '<a href="' + current.link + '" target="_blank">';
        code = code + '<h2 class="white"><u>' + current.title + '</u></h2></a>';
        code = code + '<p>' + current.description + '</p></div></div>';

    }

    return code;

}

document.getElementById("main-portfolio").innerHTML = appendData(obj);

All the code above is within tags inside the div with the tag "main-portfolio". When I open the HTML file as normal, the data from the JSON does not show up in the HTML file. How do I fix this problem?

The json file "portfolioData.json" is in the same directory as the main HTML file. The format of the JSON is below.

[
    {
        "title": "SAMPLE TITLE",
        "link": "https://google.com",
        "date": ["22", "11", "20"],
        "description": "SAMPLE DESCRIPTION"
    }

]