Создать HTML таблицу из JSON объекта

Question

Я пытаюсь сгенерировать таблицу из 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 и мои функции находятся в теге скрипта

Answer 1

попробуйте это:

как в документации

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