使用JavaScript從JSON值加載HTML表

Question

我有一個類似於https://pastebin.com/ushcMpwY的JSON文件，我想將其加載到具有6列（組，名稱，注冊1，注冊2，星期，半年）的HTML表中。 這是我想要產生的示例：

<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

懷亞特·費爾德

[R

[R

0

1

但是，我的代碼當前產生此結果：

9

HA09_000

{名稱：“懷亞特·費爾德”，注冊_1：“ R”，注冊_2：“ R”，星期：0，半年：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/

Answer 2

我猜您想將個人信息放入數組中？ 添加另一個循環以遍歷person_info對象的鍵和值。

        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
        }