从GitHub获取JSON转为JS对象后无法在HTML中显示的问题

我已经实现从GitHub拉取JSON数据并转换为JavaScript对象的功能，但无法将内容展示到HTML页面中。当前代码第70-73行是尝试的展示逻辑，曾使用JSON.stringify处理对象尝试显示，期望完整展示JSON内容，实际得到空白页面或显示“null”。

原始代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>json</title>
    <script>
        function populateHeader(company) {
            const myH1 = document.createElement('h1');
            myH1.textContent = company['companyName'];
            header.appendChild(myH1);

            const myPara = document.createElement('p');
            myPara.textContent = 'Division: ' + company['division'] + ', ' + company['location'] + '\nHead: ' + company['divisionHeadName'];

            header.appendChild(myPara);
        }

        function showEmp(company) {
            const emps = company['members'];

            for (let i = 0; i < emps.length; i++) {
                const myArticle = document.createElement('article');
                const myH2 = document.createElement('h2');
                const myPara1 = document.createElement('p');
                const myList = document.createElement('ul');

                myH2.textContent = emps[i].name + ', ' + emps[i].gender;
                myPara1.textContent = 'Age: ' + emps[i].age + ", Favorite Fruit: " + emps[i].favoriteFruit + ", Contacts:";

                const contacts = emps[i].contacts;
                for (let j = 0; j < contacts.length; j++) {
                    const listItem = document.createElement('li');
                    listItem.textContent = emps[j].name + ", " + emps[j].company;
                    myList.appendChild(listItem);
                }

                myArticle.appendChild(myH2);
                myArticle.appendChild(myPara1);
                myList.appendChild(listItem);

                section.appendChild(myArticle);
            }
        }
        
    </script>
</head>
<body>
    <header id="hdr">
    </header>

    <section id="sct">
    </section>

    <script>
        const header = document.querySelector('header');
        const section = document.querySelector('section');

        let requestURL = 'https://github.com/drgap/json_example/blob/main/company.jsonhttps://github.com/drgap/json_example/blob/af5d92bc9ed1b399aabdc50b132f51324025facd/company.json';
        let request = new XMLHttpRequest();
        request.open('GET', requestURL);
        request.responseType = 'json';
        request.send();

        request.onload = function () {
            const company = request.response;
            populateHeader(company);
            showEmp(company);
        }

        header = header.toString();
        section = section.toString();
        document.getElementById("hdr").innerHTML = JSON.stringify(header);
        document.getElementById("sct").innerHTML = JSON.stringify(section);
    </script>
</body>

</html>

问题分析与修复方案 #

1. 请求链接错误 #

GitHub的blob页面返回的是网页，不是原始JSON数据，且你的链接重复了两次。需要替换为原始文件地址，格式为https://raw.githubusercontent.com/用户名/仓库名/分支名/文件路径。

2. 错误覆盖DOM元素引用 #

代码最后把header和section（DOM元素对象）转成字符串并重新赋值，覆盖了之前获取的DOM引用，导致populateHeader和showEmp函数无法正确操作页面元素，必须删除这几行错误代码。

3. showEmp函数逻辑错误 #

• 遍历联系人时，错误使用emps[j]而非contacts[j]，导致取错数据
• myList.appendChild(listItem)放在内层循环外，会引发变量未定义错误，需移至内层循环中

4. 冗余的展示逻辑 #

你已经通过populateHeader和showEmp函数创建DOM元素并添加到页面，后续用JSON.stringify覆盖innerHTML的操作完全多余，会清空之前的渲染结果。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>json</title>
    <script>
        function populateHeader(company) {
            const myH1 = document.createElement('h1');
            myH1.textContent = company['companyName'];
            header.appendChild(myH1);

            const myPara = document.createElement('p');
            // 用<br>替换\n实现页面换行
            myPara.innerHTML = 'Division: ' + company['division'] + ', ' + company['location'] + '<br>Head: ' + company['divisionHeadName'];
            header.appendChild(myPara);
        }

        function showEmp(company) {
            const emps = company['members'];

            for (let i = 0; i < emps.length; i++) {
                const myArticle = document.createElement('article');
                const myH2 = document.createElement('h2');
                const myPara1 = document.createElement('p');
                const myList = document.createElement('ul');

                myH2.textContent = emps[i].name + ', ' + emps[i].gender;
                myPara1.textContent = 'Age: ' + emps[i].age + ", Favorite Fruit: " + emps[i].favoriteFruit + ", Contacts:";

                const contacts = emps[i].contacts;
                for (let j = 0; j < contacts.length; j++) {
                    const listItem = document.createElement('li');
                    // 修正为使用contacts[j]获取当前联系人数据
                    listItem.textContent = contacts[j].name + ", " + contacts[j].company;
                    myList.appendChild(listItem);
                }

                myArticle.appendChild(myH2);
                myArticle.appendChild(myPara1);
                // 将列表添加到文章容器中
                myArticle.appendChild(myList);

                section.appendChild(myArticle);
            }
        }
        
    </script>
</head>
<body>
    <header id="hdr">
    </header>

    <section id="sct">
    </section>

    <script>
        const header = document.querySelector('header');
        const section = document.querySelector('section');

        // 替换为原始JSON文件地址
        let requestURL = 'https://raw.githubusercontent.com/drgap/json_example/main/company.json';
        let request = new XMLHttpRequest();
        request.open('GET', requestURL);
        request.responseType = 'json';
        request.send();

        request.onload = function () {
            const company = request.response;
            populateHeader(company);
            showEmp(company);
        }
    </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Joseph Campbell