Why is my array not appending as a new row in my table? when it does it is undefined? JavaScript / HTML

Question

So as shown below, in the console it gives my all the data that has been entered, however it will not display as a new row. If i move the second function/for loop into the first, it only displays each value as undefined, which seems like progress. Why? and how can i fix this issue? (also when everything is in one function, it goes from 1 row, to three each time the button is clicked to submit the data)

    var list = [];
   
    function addAppointment() {
        var appointmentData = {};

        var inputDate = document.getElementById('date').value;
        appointmentData.date = inputDate;
        var inputStartTime = document.getElementById('startTime').selectedIndex;
        appointmentData.startTime = inputStartTime;
        var inputEndTime = document.getElementById('endTime').selectedIndex;
        appointmentData.endTime = inputEndTime;
        var inputSubject = document.getElementById('subject');
        appointmentData.subject = inputSubject;
        var inputVenue = document.getElementById('venue');
        appointmentData.venue = inputVenue;

  
    
     list.push(appointmentData);
    }

      console.log("list", list)

    function addData(data) {
        console.log(data)
        const tbody = document.getElementById("tbody");

        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement("tr");
            tr.innerHTML = `
            <td>${data[i].inputDate}</td>
            <td>${data[i].inputStartTime}</td>
            <td>${data[i].inputEndTime}</td>
            <td>${data[i].inputSubject}</td>
            <td>${data[i].inputVenue}</td>
            `;
            tbody.append(tr);
        }
    
    
    addData(list);

    }
     

</script>

<title>Diary</title>
<h1 style="text-align: center;">Diary</h1>
<form>
    <table bgcolor="#cccccc" cellpadding="5" cellspacing="0" align="center">
        <tr>
            <td align="right">Date</td>
            <td><input type="date" id="date" size="10" min="2020-01-01"></td>
            <td align="right">Start Time</td>
            <td>
                <select id="startTime">
                    <option value="00:00">00:00</option>
                    <option value="01:00">01:00</option>
                    <option value="02:00">02:00</option>
                    <option value="03:00">03:00</option>
                    <option value="04:00">04:00</option>
                    <option value="05:00">05:00</option>
                    <option value="06:00">06:00</option>
                    <option value="07:00">07:00</option>
                    <option value="08:00">08:00</option>
                    <option value="09:00">09:00</option>
                    <option value="10:00">10:00</option>
                    <option value="11:00">11:00</option>
                    <option value="12:00">12:00</option>
                    <option value="13:00">13:00</option>
                    <option value="14:00">14:00</option>
                    <option value="15:00">15:00</option>
                    <option value="16:00">16:00</option>
                    <option value="17:00">17:00</option>
                    <option value="18:00">18:00</option>
                    <option value="19:00">19:00</option>
                    <option value="20:00">20:00</option>
                    <option value="21:00">21:00</option>
                    <option value="22:00">22:00</option>
                    <option value="23:00">23:00</option>
                </select>
            </td>
            <td align="right">End Time</td>
            <td>
                <select id="endTime">
                    <option value="00:00">00:00</option>
                    <option value="01:00">01:00</option>
                    <option value="02:00">02:00</option>
                    <option value="03:00">03:00</option>
                    <option value="04:00">04:00</option>
                    <option value="05:00">05:00</option>
                    <option value="06:00">06:00</option>
                    <option value="07:00">07:00</option>
                    <option value="08:00">08:00</option>
                    <option value="09:00">09:00</option>
                    <option value="10:00">10:00</option>
                    <option value="11:00">11:00</option>
                    <option value="12:00">12:00</option>
                    <option value="13:00">13:00</option>
                    <option value="14:00">14:00</option>
                    <option value="15:00">15:00</option>
                    <option value="16:00">16:00</option>
                    <option value="17:00">17:00</option>
                    <option value="18:00">18:00</option>
                    <option value="19:00">19:00</option>
                    <option value="20:00">20:00</option>
                    <option value="21:00">21:00</option>
                    <option value="22:00">22:00</option>
                    <option value="23:00">23:00</option>
                </select>
            </td>

        </tr>
        <tr>
            <td align="right">Subject:</td>
            <td><input type="text" id="subject" size="10"></td>
        </tr>
        <tr>
            <td align="right">Venue:</td>
            <td><input type="text" id="venue" size="10"></td>
        </tr>
        <tr>
            <td valign="top" align="center">Priority</td>
            <td><input type="radio" id="high" name="Priority" checked />High<br />
            <td><input type="radio" id="medium" name="Priority" checked />Medium<br />
            <td><input type="radio" id="low" name="Priority" checked />Low<br />
            </td>
        </tr>

    </table>
    <tr>
        <td></td>
        <td></td><input type="button" value="Add Appointment" onclick="addAppointment()" /></td>
    </tr>


    <hr>

    <div>
    <table align="center" width="80%" height="150px" cellpadding="1px" cellspacing="1px" border="1" id="table1">
        <thead>
            <tr>
                <th width="50">Date</th>
                <th width="20">Start</th>
                <th width="20">End</th>
                <th width="75">Subject</th>
                <th width="60">Venue</th>
                <th width="5">Priority</th>
            </tr>
        </thead>
        <tbody id="tbody"> </tbody>
    </table>
    </div>
    <tr>
        <td></td>
        <td></td><input type="reset" value="Randomise Appointments" onclick="shuffleAppointments()" /></td>
        <td></td><input type="button" value="Sort Appointments" onclick="sortRecords()" /></td>
        <td>by</td>
        <td>
            <select id="Date">
                <option value="date">Date</option>
                <option value="startTime">Start Time</option>
                <option value="endTime">End Time</option>
                <option value="subject">Subject</option>
                <option value="venue">Venue</option>
                <option value="priority">Priority</option>
            </select>
        </td>
    </tr>
    <hr>



    <table>
        <th width="50">Date</th>
        <th width="20">Year</th>
        <th width="20">Appointment</th>


        </hr>

    </table>
</form>

Answer 1

did you run addAppointment() first? It also looks like you are calling addData(list) within the addData definition, is this on purpose?

I recon this would do it:

fucntion addAppointment (){
    var list = [];
   
   function getDataFromSubmit() {
       var appointmentData = {};

       var inputDate = document.getElementById('date').value;
       appointmentData.date = inputDate;
       var inputStartTime = document.getElementById('startTime').selectedIndex;
       appointmentData.startTime = inputStartTime;
       var inputEndTime = document.getElementById('endTime').selectedIndex;
       appointmentData.endTime = inputEndTime;
       var inputSubject = document.getElementById('subject');
       appointmentData.subject = inputSubject;
       var inputVenue = document.getElementById('venue');
       appointmentData.venue = inputVenue;
    
       list.push(appointmentData);
    }
    
    function addData(data) {
       console.log(data)
       const tbody = document.getElementById("tbody");

       for (var i = 0; i < data.length; i++) {
           var tr = document.createElement("tr");
           tr.innerHTML = `
                <td>${data[i].inputDate}</td>
                <td>${data[i].inputStartTime}</td>
                <td>${data[i].inputEndTime}</td>
                <td>${data[i].inputSubject}</td>
                <td>${data[i].inputVenue}</td>
           `;
           tbody.append(tr);
        }
    }

    getDataFromSubmit()
    console.log("list", list)
    addData(list);
}

Answer 2

Review this bit:

    var inputDate = document.getElementById('date').value;
    appointmentData.date = inputDate;
    var inputStartTime = document.getElementById('startTime').selectedIndex;
    appointmentData.startTime = inputStartTime;
    var inputEndTime = document.getElementById('endTime').selectedIndex;
    appointmentData.endTime = inputEndTime;
    var inputSubject = document.getElementById('subject');
    appointmentData.subject = inputSubject;
    var inputVenue = document.getElementById('venue');
    appointmentData.venue = inputVenue;

selectedIndex on a SELECT element will return a number, so inputStartTime/inputEndTime will be numbers not times. Change .selectedIndex to .value

inputSubject and inputVenue both point to elements NOT their values. So, add .value to the end of both.

Answer 3

Try this script instead:

var list = [];

let appointment = {
    date: "",
    startTime: "",
    endTime: "",
    subject: "",
    venue: "",
    rowData: function () {
        return "<tr><td>" + this.date + "</td><td>" + this.startTime + "</td><td>" + this.endTime + "</td><td>" + this.subject + "</td><td>" + this.venue + "</td></tr>";
    }
}


function addAppointment() {
        let thisAppointment = Object.create(appointment);
        thisAppointment.date = document.getElementById('date').value;
        thisAppointment.startTime = document.getElementById('startTime').value;
        thisAppointment.endTime = document.getElementById('endTime').value;
        thisAppointment.subject = document.getElementById('subject').value;
        thisAppointment.venue = document.getElementById('venue').value;
        list.push(thisAppointment);
        
        let tbody = document.getElementById("tbody");
        tbody.innerHTML += thisAppointment.rowData();

}

This creates an object called appointment and defines some properties for it - including a function to output the tr/td row data.

The addAppointment() function creates a new instance of this object, populates it with the new data and updates the innerHTML of the "tbody" element with the rowData() value.