javascript - 使用 JavaScript 从 JSON 值加载 HTML 表

Question

我有一个如下所示的 JSON 文件 https://pastebin.com/ushcMpwY ，我想将其加载到一个有 6 列的 HTML 表中(组、名称、注册 1、注册 2、周、半学期)。这是我希望它产生的结果的示例:

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

有人建议我应该使用 OOP 方法，例如这个 https://pastebin.com/0TRrLT6n ，虽然我能够让它在打印数据方面发挥作用，但它似乎并不是一种对于制作实际表格非常有用的方法。目前它非常有问题。它生成一个如下所示的表:http://prntscr.com/m9eh44我只是不知道如何让它像我上面描述的那样，所以我宁愿回到我理解的一种程序方法，就像我在下面的伪代码中引用的方法一样。

最初，我尝试编写一些代码，其工作原理如下伪代码:

TABLE = GET_TABLE_BY_ID('people')
PERSON_COUNT = 0
FOR GROUP IN DATA:
    FOR PERSON IN GROUP:
        ROW = TABLE.INSERTROW(PERSON_COUNT)
        ROW.CLASSLIST.ADD(GROUP.NAME)
        ROW.ID.ADD(PERSON.ID)
        CELL = ROW.INSERTCELL(0)
        CELL.INNERHTML = GROUP.NAME
        INFO_COUNT = 0
        FOR INFO IN PERSON:
            CELL = ROW.INSERTCELL(INFO_COUNT)
            CELL.INNERHTML = INFO
            INFO_COUNT++
        PERSON_COUNT++

这导致了一些像这样的实际代码(当时我只是试图打印出这些值，因为这样就足够简单地将其转换为代码来生成表格)。

$.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
            }
        }
    }
}

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

9

HA09_000

Wyatt Feldt

R

R

0

1

但是，我的代码目前会产生以下结果:

9

HA09_000

{name: "Wyatt Feldt", registration_1: "R", registration_2: "R", week: 0, half_term: 1}

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

谢谢。

Answer 1

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

1. 扁平化所有数据
2. 构建 HTML 表格行
3. 添加到表格

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

我的解决方案有点长，所以请参阅下面的 jsFiddle...

https://jsfiddle.net/u1ekga7y/