I have explored and worked with JSON data recently, and thank you to everyone who is so helpful here. I was able to make a lot of progress!!! Now I have a minor roadblock. IRL I will be dealing with pure JSON, no need to pull in from PHP or anything - and I would like to get the values from this as either an array (if that is the best way) and then create a table which I can then take the entire contents of and switch out an existing HTML table I have in the Hype File.
I have seen this topic discussed but the one entry closest to it was never really answered, so please bear with me if this is repetitive. Although I do want to be recursive
What happens: the first innerHTML change completes, and everything is OK. But then the second time, when I want to replace the field in HYPE with the newly created HTML table it does not work. I know I am close, I can feel it. I need a nudge in the right direction.
My javascript code is:
document.getElementById("thisWeeksTable").innerHTML = 'I just changed this again';
// STORE EACH PERSON AS AN OBJECT IN AN ARRAY
var thisWeek = [
{
todayIs: 'Monday',
employees: 20,
totalHours: 160,
cases: 5000,
casesPerHour: 31.25
},
{
todayIs: 'Tues',
employees: 23,
totalHours: 198,
cases: 6425,
casesPerHour: 32.44
},
{
todayIs: 'Wednesday',
employees: 18,
totalHours: 177,
cases: 5214,
casesPerHour: 29.76
},
{
todayIs: 'Thursday',
employees: 19,
totalHours: 180,
cases: 5656,
casesPerHour: 29.76
}
];
// CHECKS EACH PERSON AND ADDS THOSE IN RANGE TO ARRAY
var results = [];
thisWeek.forEach(function(weekDay) {
results.push(weekDay);
}
);
// LOOP THROUGH NEW ARRAY ADD CONTENT
var $tableBody = $('<tbody></tbody>'); // New table body
for (var i = 0; i < results.length; i++) { // Loop through matches
var weekDay = results[i]; // Store current weekday
var $row = $('<tr></tr>'); // Create a row for them
$row.append($('<td></td>').text(weekDay.todayIs)); // Add their name
$row.append($('<td></td>').text(weekDay.employees)); // Add emp
$row.append($('<td></td>').text(weekDay.totalHours)); // Add total hours
$row.append($('<td></td>').text(weekDay.cases)); // Add their cases
$row.append($('<td></td>').text(weekDay.casesPerHour)); // Add their cases
$tableBody.append( $row ); // Add row to new content
}
$('thead').after($tableBody); // Add tbody after thead
document.getElementById("thisWeeksTable").innerHTML = $tableBody;