使用JavaScript从JSON值加载HTML表

我有一个类似这样的JSON文件，我想将它加载到一个HTML表中，该表有6列：group、name、registration 1、registration 2、week、half-term。下面是我希望它产生的一个例子：

<table id="people">
    <tr>
        <th>Group name</th>
        <th>Name</th>
        <th>Registration 1</th>
        <th>Registration 2</th>
        <th>Week</th>
        <th>Half term</th>
    </tr>

    <!-- Where JS inserted HTML begins -->
    <tr class="9" id="HA09_000">
        <td>9</td>
        <td>Wyatt Fedlt</td>
        <td>R</td>
        <td>R</td>
        <td>0</td>
        <td>1</td>
    </tr>

    ...

    <!-- Where JS inserted HTML ends -->

</table>

这就产生了一些像这样的实际代码，当时我只是想打印出这些值，因为这样就可以很简单地将其转换为代码来生成表

$.getJSON("http://localhost:8000/data.json", function(data) {
    output_json(data);
});

function output_json(data) {
    var i, j, k;
    for (i = 0; i < Object.keys(data).length; i++) {
        group_ = Object.values(data)[i];
        for (j = 0; j < Object.keys(group_).length; j++) {
            person = Object.values(group_)[j];
            person_id = Object.keys(person)[0];
            console.log(Object.keys(data)[i]); // Group
            console.log(person_id); // ID
            for (k = 0; k < Object.keys(person).length; k++) {
                person_info = Object.values(person)[k][0];
                console.log(person_info); // Information
            }
        }
    }
}

我希望这段代码能打印出我想输入到表中的每个人的数据，即他们的组、姓名等。我希望它能这样做：

九,

HA09_000

怀亚特费尔德

R

R

0

一,

但是，我的代码当前生成以下内容：

九,

HA09_000

{姓名：怀亚特·费尔德，注册号为1:R，注册号为2:R，周数为0，半学期数为1}

如果有人能告诉我如何至少打印这些值，那么只要是程序性的，我相信我可以自己添加表格部分。但是，如果您认为这真的应该是OOP，那么如果您能向我解释一下如何实现表部分，我将非常感激。我知道我可以用4个for循环完成这项工作，但这是非常低效的，我相信它可以在3个更清晰的循环中完成，就像我在伪代码中列出的那样

---

谢谢。

我猜您希望人员信息在一个数组中？添加另一个循环以遍历person_info对象键和值

        for (k = 0; k < Object.keys(person).length; k++) {
            person_info = Object.values(person)[k][0];
            console.log(person_info); // Information
        }

到

---

IMO一个更具可读性/优雅的解决方案是稍微分离关注点并使用纯函数

将所有数据展平 生成HTML表行 添加到表中 我的解决方案有点长，请参阅下面的JSFIDLE

---

如果你使用console.logperson\u info.half\u term；“你能用它来制作表格吗？”MatthewPage说，这样做行得通，但这意味着我会有很多代码重复。我只是试着像我的伪代码一样去做。谢谢你的帮助，但我真的不知道你的代码里发生了什么。我不精通任何特定于JavaScript的东西，也不太清楚发生了什么。例如，如果我想像我描述的那样添加组，我就不知道如何添加。你有没有可能帮助我让它像我的伪代码一样工作？老实说，我认为这会更有可读性，更有意义。很抱歉好吧，我已经找到了如何用${className}添加组的方法，但是我仍然不能理解大部分代码，我真的不想复制我不懂的代码。还有，这是jQuery，对吗？当然很乐意帮忙。最好的方法是查看我提供的JSFIDLE链接生成的HTML，如果与您试图实现的目标不一致，请告诉我。对不起，我不太清楚。在我添加${className}之后，您的代码完全执行了我希望它执行的操作，因此它还显示了组。我的问题是，我对JS非常陌生，因为我主要用Python编写代码，所以我不太了解正在发生的事情。我希望用一种类似于我的伪代码的方法来完成它，因为我知道它是如何工作的。正如我所说，如果我不知道发生了什么，我不喜欢只复制代码。90%的代码只是JS，但它是ES6的最新版本，因此有一些较新的语言功能，如对象扩展运算符…somVariable。这基本上是从一个对象中提取所有的属性和值，并将它们合并到一个新的对象中感谢您的建议，但这是我在我的问题中提到的我不喜欢的解决方案。它有一个完全不必要的for循环，可读性不强。

        for (k = 0; k < Object.keys(person).length; k++) {
            person_info = Object.values(person)[k][0];
            console.log(person_info); // Information
        }

        var person_info_data = [];
        for (k = 0; k < Object.keys(person).length; k++) {
            person_info = Object.values(person)[k][0];
            for (l = 0; l < Object.keys(person_info).length; l++) {
                person_info_data.push(Object.values(person_info)[l])
            }
            console.log(person_info_data); // Information
        }

    let rowKeys = Object.keys(data);

    // iterate over the 'first level' keys with the goal of extracting the values needed in the final objects (elemClass), while then extracting the 'second level' object (group) so that you can access its data.
    let rowsFlattened = rowKeys.reduce((acc,key) => {
            let elemClass = key,
                group = data[key];

             let people = group.reduce((acc2,groupObj)=> {
                    let elemId = Object.keys(groupObj)[0],
                        person = groupObj[elemId][0];

                        return [
                            ...acc2,
                            {
                                ...person,
                                className: elemClass,
                                id: elemId
                            }
                        ]
                },[])

                // these 'spread operators' merge either objects or arrays, in this case an array.
                return [
                    ...acc,
                    ...people
                ]

        // this '[]' is the starting accumulator, which you have access to in the 'acc' parameter above. After each iteration this 'acc' value is replaced by whatever value is returned in the previous iteration. 
        },[]);

    // 
    let rowsHTML = rowsFlattened.map(obj => {
            let { className, id, name, registration_1, registration_2, week, half_term} = obj;
            return `
                <tr class="${className}" id="${id}">
                    <td>${className}</td>
                    <td>${name}</td>
                    <td>${registration_1}</td>
                    <td>${registration_2}</td>
                    <td>${week}</td>
                    <td>${half_term}</td>
                </tr>
            `
        })  

        $('#people').html(rowsHTML);