从 JSON 对象生成 HTML 表答案

【问题标题】：Generate HTML table from JSON object从 JSON 对象生成 HTML 表
【发布时间】：2020-08-15 00:09:20
【问题描述】：

我正在尝试从我从控制器收到的 JSON 对象生成一个表。单击按钮时会触发 javascript 函数，该按钮将要解决的 JSON 对象发送到后端，并且响应存储在变量中。然后单击另一个按钮来填充表格。但是，它似乎并没有为我生成表格，只在员工列中显示名称。

JSON对象如下：

    {
    "employees": [
        {
            "employeeId": 0,
            "employeeName": "John",
            "skillLevel": 10,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 1,
            "employeeName": "Elaine",
            "skillLevel": 12,
            "employeeType": "PART_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 2
        },
        {
            "employeeId": 2,
            "employeeName": "Kieran",
            "skillLevel": 11,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 3,
            "employeeName": "Amy",
            "skillLevel": 10,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 4,
            "employeeName": "Steve",
            "skillLevel": 9,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 5,
            "employeeName": "Maeve",
            "skillLevel": 9,
            "employeeType": "PART_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 2
        },
        {
            "employeeId": 6,
            "employeeName": "Tommy",
            "skillLevel": 15,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 7,
            "employeeName": "James",
            "skillLevel": 12,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        }
    ],
    "shifts": [
        {
            "shiftId": 0,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Monday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 1,
                "employeeName": "Elaine",
                "skillLevel": 12,
                "employeeType": "PART_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 2
            }
        },
        {
            "shiftId": 1,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Monday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 0,
                "employeeName": "John",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 2,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Monday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 2,
                "employeeName": "Kieran",
                "skillLevel": 11,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 3,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Tuesday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 6,
                "employeeName": "Tommy",
                "skillLevel": 15,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 4,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Tuesday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 3,
                "employeeName": "Amy",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 5,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Tuesday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 7,
                "employeeName": "James",
                "skillLevel": 12,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 6,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Wednesday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 4,
                "employeeName": "Steve",
                "skillLevel": 9,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 7,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Wednesday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 5,
                "employeeName": "Maeve",
                "skillLevel": 9,
                "employeeType": "PART_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 2
            }
        },
        {
            "shiftId": 8,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Wednesday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 6,
                "employeeName": "Tommy",
                "skillLevel": 15,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 9,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Thursday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 7,
                "employeeName": "James",
                "skillLevel": 12,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 10,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Thursday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 2,
                "employeeName": "Kieran",
                "skillLevel": 11,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 11,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Thursday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 0,
                "employeeName": "John",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 12,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Friday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 0,
                "employeeName": "John",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 13,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Friday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 0,
                "employeeName": "John",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 14,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Friday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 0,
                "employeeName": "John",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 15,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Saturday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 1,
                "employeeName": "Elaine",
                "skillLevel": 12,
                "employeeType": "PART_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 2
            }
        },
        {
            "shiftId": 16,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Saturday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 2,
                "employeeName": "Kieran",
                "skillLevel": 11,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 17,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Saturday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 2,
                "employeeName": "Kieran",
                "skillLevel": 11,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 18,
            "startTime": "09:00:00",
            "endTime": "18:00:00",
            "day": "Sunday",
            "requiredSkillLevel": 12,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 2,
                "employeeName": "Kieran",
                "skillLevel": 11,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 19,
            "startTime": "12:00:00",
            "endTime": "20:00:00",
            "day": "Sunday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 3,
                "employeeName": "Amy",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        },
        {
            "shiftId": 20,
            "startTime": "18:00:00",
            "endTime": "00:00:00",
            "day": "Sunday",
            "requiredSkillLevel": 10,
            "shiftAmount": 1,
            "employee": {
                "employeeId": 3,
                "employeeName": "Amy",
                "skillLevel": 10,
                "employeeType": "FULL_TIME",
                "associatedDepartment": "BAR",
                "weeklyShiftAllowance": 5
            }
        }
    ],
    "score": "-136hard/0soft"
}

我的javascript函数如下：

insertSolvedDataToTable: function (data) {
            let tbody = document.getElementById('schedule-body');
            let schData = this.solvedScheduleBody;

            /*  these for loops traverse the schedule table
                adding shifts where an employee and day match the solved response
             */
            for (let e = 0; e < this.employees.length; e++) {
                let row = document.createElement("tr");
                let eCell = document.createElement("td");
                let eCellText = document.createTextNode(this.employees[e].employeeName);
                eCell.appendChild(eCellText);
                row.appendChild(eCell);
                for (let d = 0; d < this.daysOfWeek.length; d++) {
                    for (let s = 0; s < schData.shifts.length; s++) {
                        if (schData.shifts[s].day === this.daysOfWeek[d] && schData.shifts[s]["employee"].employeeName === this.employees[e].employeeName) {
                            let data = schData.shifts[s].startTime + "-" + schData.shifts[s].endTime;
                            let cell = document.createElement("td");
                            let cellText = document.createTextNode(data);
                            cell.appendChild(cellText);
                            row.appendChild(cell);
                        }
                    }
                }
                tbody.appendChild(row);
            }
        }

我正在使用 Vuejs，我的函数在脚本标签中

【问题讨论】：

为什么要操纵 DOM 来创建表？看Example table hydrate from json data
我已经用这个 javascript 函数填充了空表。但是，班次列表的长度与员工或天数不同。如果特定日期没有匹配，我想创建一个空单元格并且如果有匹配填充它。我认为您的解决方案不适用于我正在尝试做的事情。
用我的解决方案你可以这样做，否则我试过你的代码对我有用，检查daysOfWeek字符串值是否与schData.shifts.day包括"Monday" !== "monday"中的格式相同，否则分享daysOfWeek 值和您的表实现
我的代码有错误，请检查更新预览

标签： javascript html json vue.js

【解决方案1】：

试试这个：

如documentation

const data = {
    "employees": [
        {
            "employeeId": 0,
            "employeeName": "John",
            "skillLevel": 10,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 1,
            "employeeName": "Elaine",
            "skillLevel": 12,
            "employeeType": "PART_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 2
        },
        {
            "employeeId": 2,
            "employeeName": "Kieran",
            "skillLevel": 11,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
        {
            "employeeId": 3,
            "employeeName": "Amy",
            "skillLevel": 10,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        },
    ],
 "shifts": [
    {
        "shiftId": 0,
        "startTime": "09:00:00",
        "endTime": "18:00:00",
        "day": "Monday",
        "requiredSkillLevel": 12,
        "shiftAmount": 1,
        "employee": {
            "employeeId": 1,
            "employeeName": "Elaine",
            "skillLevel": 12,
            "employeeType": "PART_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 2
        }
    },
    {
        "shiftId": 1,
        "startTime": "12:00:00",
        "endTime": "20:00:00",
        "day": "Monday",
        "requiredSkillLevel": 10,
        "shiftAmount": 1,
        "employee": {
            "employeeId": 0,
            "employeeName": "John",
            "skillLevel": 10,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        }
    },
    {
        "shiftId": 2,
        "startTime": "18:00:00",
        "endTime": "00:00:00",
        "day": "Monday",
        "requiredSkillLevel": 10,
        "shiftAmount": 1,
        "employee": {
            "employeeId": 2,
            "employeeName": "Kieran",
            "skillLevel": 11,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        }
    },
    {
        "shiftId": 3,
        "startTime": "09:00:00",
        "endTime": "18:00:00",
        "day": "Tuesday",
        "requiredSkillLevel": 12,
        "shiftAmount": 1,
        "employee": {
            "employeeId": 6,
            "employeeName": "Tommy",
            "skillLevel": 15,
            "employeeType": "FULL_TIME",
            "associatedDepartment": "BAR",
            "weeklyShiftAllowance": 5
        }
    }],
    "score": "-136hard/0soft"
}

const getFromApi = () => {
return Promise.resolve(data);
}
const App = {
  template: `
    <div>

     <button v-on:click="loadData">Load data</button>
     <table>
     <thead><th>Id</th><th>Name</th><th></th></thead>
     <tbody>
     <tr v-for="emp of employees" :key="emp.employeeId">
         <td>{{emp.employeeId}}</td><td>{{emp.employeeName}}<th><button v-on:click="selectedEmployee = emp.employeeId">Select</button></th></td>
     </tr>
     </tbody>
     </table>

     <div>
      <h3>display shifts for: {{selectedEmployee}} </h3>
        <ul>
         <li v-for="shift of filteredShifts" :key="shift.shiftId">
            {{shift.shiftId}} - {{shift.day}}
          </li>
        </ul>
     </div>

    </div>
  `,
  computed: {
   filteredShifts: function(){
    return this.shifts.filter(item => item.employee.employeeId == this.selectedEmployee)
}
},
  methods: {
   loadData: function(){
        getFromApi().then(results => {
        this.employees = results.employees; 
        this.shifts = results.shifts;
       })
     }
  },
  data() {
    return {
      employees: [],
      shifts: [],
      selectedEmployee: "",
    }
  }
}

new Vue({
  render: h => h(App),
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app"/>

【讨论】：

我已经显示了员工的姓名，但是页面上根本没有添加班次
您的意思是要在选择员工时添加班次？再次检查，看看它是否适合你