getting undefined while displaying array on table

Question

i have a function to create a schedule i have a class schedule then an array which stores the objects created but when i try displaying the objects in a table i get undefined

const mySchedules=[];
class Schedule {
    constructor(name, subject, time, day) {
        this.name = name;
        this.subject = subject;
        this.time = time;
        this.day = day;

    }
}



function create() {

    let
        name = document.getElementById("name").value,
        subject = document.getElementById("subject").value,
        time = document.getElementById("time").value,
        day = document.getElementById("day").value,
        table = document.getElementById("table")


    mySchedules.push(new Schedule(name, subject, time, day))


//create object
    let obj = new Schedule();

// Create Row
    let row = `<tr>
               <td>${obj.name}</td>
               <td>${obj.subject}</td>
               <td>${obj.time}</td>
               <td>${obj.day}</td>
             </tr>`;

    table.insertAdjacentHTML("beforeend", row);

}

let obj = new Schedule(); <= no arguments are given to the constructor. Why do you even need that variable. obj should be set to the schedule you created and appended to the array. Not a new empty one — Taplar
– Taplar, Commented Dec 26, 2019 at 21:25
You don't have to use this let obj = new Schedule(); because it is empty, instead you can loop through mySchedules array — Shaphan
– Shaphan, Commented Dec 26, 2019 at 21:29

Shaphan · Accepted Answer · 2019-12-28 18:25:39Z

By doing this let obj = new Schedule(); you are initializing your object to empty schedule which makesname property of obj and other properties undefined.

Changing your code like this would help.

const mySchedules=[];
class Schedule {
    constructor(name, subject, time, day) {
        this.name = name;
        this.subject = subject;
        this.time = time;
        this.day = day;

    }
}



function create() {

    let
        name = document.getElementById("name").value,
        subject = document.getElementById("subject").value,
        time = document.getElementById("time").value,
        day = document.getElementById("day").value,
        table = document.getElementById("table")

    // store the schedule in a variable
    let schedule = new Schedule(name, subject, time, day);

    mySchedules.push(schedule)


//create object
   let obj = schedule;

// Create Row
    let row = `<tr>
               <td>${obj.name}</td>
               <td>${obj.subject}</td>
               <td>${obj.time}</td>
               <td>${obj.day}</td>
             </tr>`;

    table.insertAdjacentHTML("beforeend", row);

}

Seth Lutske · Accepted Answer · 2019-12-27 00:54:08Z

0

Your object obj that you're trying to reference is empty, because you called your constructor with no agruments, as Taplar said above:

let obj = new Schedule()

You need to call it with your arguments:

let obj = new Schedule(name, subject, time, day)

In which case your mySchedules array is pretty useless.

answered Dec 27, 2019 at 0:54

Seth Lutske

11k9 gold badges57 silver badges122 bronze badges

Collectives™ on Stack Overflow

getting undefined while displaying array on table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related