Generate HTML table from JSON object
Question
I am trying to generate a table from a JSON object that I receive back from a controller. A javascript function is triggered when a button is clicked which sends a JSON object to be solved to the backend and the response is stored in a variable. Another button is then clicked to populate the table. However it does not seem to be generating the table for me only displaying the names in the employee column.
The JSON object is as follows:
{
"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"
}
My javascript function is as follows:
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);
}
}
I am using Vuejs and my functions are in a script tag
1 answers
solution1
0 2020-04-30 16:38:33
try this:
as on the 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"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Unable to generate html table from JSON object in JS
Generate HTML table from intricate JSON
How to generate a HTML table dynamically from a nested JSON object using ngRepeat directive of AngularJS?
Create HTML table with hyperlink from JSON Object
Trying to generate table from JSON file with bean tags embedded in HTML
Generate HTML table from loaded json file not working
Dynamically generate bootstrap grid HTML from JSON object using Javascript
Json Object to HTML table
Automatically generate HTML from JSON
Generate JSON from HTML form
Related Tags