我正在嘗試修改 JSON 文件中的數據並將其放入 HTML 文件中。 如何修復我的代碼以使其正常工作？

Question

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);

上面的所有代碼都在帶有標簽“main-portfolio”的 div 內的標簽中。 當我正常打開 HTML 文件時，JSON 中的數據沒有顯示在 HTML 文件中。 我該如何解決這個問題？

json 文件“portfolioData.json”與主 HTML 文件位於同一目錄中。 JSON 的格式如下。

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

]

Answer 1

你說：上面的所有代碼都在帶有標簽“main-portfolio”的 div 內的標簽中

這意味着您編寫的腳本試圖在 #main-portfolio 元素添加到文檔 object model 之前運行。

也許稍后嘗試在頁面中運行腳本。