How deploy dynamic data into html table from json file?

Question

The following code I have tried but its not working. I want to deploy data according to row id into table dynamically.So in future if someone make changes into json file then data must be displayed into table's column according the json data.For Instance, if I make changes in my json file day from monday to Friday then data must be displayed into Friday column without making any changes into javascript code.

var makeSchedule= 
{
"schedule" : [
    {"fitnessClass": "One",
     "sessionType": "Push Up", 
     "duration": 1,
     "allocatedTime": {
         "group" : "A",
         "day" : "mon", 
         "location" : "Main Hall",
         "time": "11"
         },
     "alternativeTimes":
        [
        {"group" : "B",
         "day" : "tues", 
         "location" : "Main Hall2",
        "time": "11"}
        ]
    },

    {"fitnessClass": "Two",
     "sessionType": "Running", 
     "duration": 1,
     "allocatedTime": {
         "group" : "A",
         "day" : "weds", 
         "location" : "Main Hall 3",
         "time": "9"
         },
     "alternativeTimes":
        [
        {"group" : "B",
         "day" : "thurs", 
         "location" : "Main Hall 4",
         "time": "9"}
        ]
    },

    {"fitnessClass": "Three",
     "sessionType": "Pull Ups", 
     "duration": 1,
     "day" : "thurs", 
     "location" : "Main Hall 3",
     "time": "15"           
    }
    ]
}


window.addEventListener("load",function(){                 
  makeSchedule.schedule.forEach(booked => {                      
       if(booked.allocatedTime.day==='thurs')
       {                
          document.getElementsByClassName('s9').innerHTML = `${booked.sessionType}`;        

       }            
  });        
}); 

<table>
        <tbody> 
            <tr id="mon">
    		    <td class="dayRowHead">Monday</td>
    		    <td class="s9"></td>
    		    <td class="s10"></td>
            </tr>
            <tr id="tues">
    		    <td class="s9"></td>
    		    <td class="s10"></td>
    	    </tr>
    	    <tr id="thurs">
    		    <td class="s9"></td>
    		    <td class="s10"></td>
    	    </tr>
        </tbody>
    </table>

Answer 1

This line:

if(booked.allocatedTime==='thurs')

Looks like it should be:

if(booked.allocatedTime.day ==='thurs')

According to the object you have.

document.getElementsByClassName('s9').innerHTML = ${booked.sessionType};

Update

@utkanos has pointed out that document.getElementsByClassName('s9').innerHTML returns a nodeList and not an HTMLElement, which is another problem. A more complete code chunk would look like this:

var makeSchedule = {
  "schedule": [{
      "fitnessClass": "One",
      "sessionType": "Push Up",
      "duration": 1,
      "allocatedTime": {
        "group": "A",
        "day": "mon",
        "location": "Main Hall",
        "time": "11"
      },
      "alternativeTimes": [{
        "group": "B",
        "day": "tues",
        "location": "Main Hall2",
        "time": "11"
      }]
    },

    {
      "fitnessClass": "Two",
      "sessionType": "Running",
      "duration": 1,
      "allocatedTime": {
        "group": "A",
        "day": "weds",
        "location": "Main Hall 3",
        "time": "9"
      },
      "alternativeTimes": [{
        "group": "B",
        "day": "thurs",
        "location": "Main Hall 4",
        "time": "9"
      }]
    },

    {
      "fitnessClass": "Three",
      "sessionType": "Pull Ups",
      "duration": 1,
      "day": "thurs",
      "location": "Main Hall 3",
      "time": "15"
    }
  ]
}


window.addEventListener("load", function() {
  makeSchedule.schedule.forEach(booked => {
    if (booked.allocatedTime && booked.allocatedTime.day === 'mon') {
       document.querySelectorAll('.s9').forEach(el => {
            el.innerHTML = `${booked.sessionType}`;
        })
    }
  });
});

<table>
  <tbody>
    <tr id="mon">
      <td class="dayRowHead">Monday</td>
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
    <tr id="tues">
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
    <tr id="thurs">
      <td class="s9"></td>
      <td class="s10"></td>
    </tr>
  </tbody>
</table>

Note that I used querySelectorAll() instead of getElementsByClassName(), and looped through the results with forEach(). Finally, I changed "thurs" to "mon", since "thurs" is only in booked.alternativeTimes.day and booked.day in your example data. I would suggest making your data object more uniform in structure so that you don't have to use a lot of conditionals to access the right data in the future. You should always be able, for example, to expect the "day" value to appear in the same place in each booked object.

Answer 2

you need to search for the class in the parent element

var x = document.getElementById("thurs");
  x.getElementsByClassName("s9")[0].innerHTML = `${booked.sessionType}`;