时间戳

首页 > 解决方案 > 使用 JavaScript 从 JSON 值加载 HTML 表

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

问题描述

我有一个看起来像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

{name：“Wyatt Feldt”，registration_1：“R”，registration_2：“R”，周：0，half_term：1}

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

谢谢。

标签： javascripthtmljson

解决方案

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/

推荐阅读