Add object from array to table

Question

I've been trying to get around, howto add my Student object, to my array. Once I got that fixed, I tried to display what's inside the array, onto a table, in a html file.

Student Object:

var Student = function (fullName, email, phone, category, groupID) {
    this.fullName = fullName;
    this.email = email;
    this.phone = phone;
    this.category = category;
    this.groupID = groupID;
};

studentArray:

var studentArray = new Array(Student);

makeTable function:

function makeTable() {
    var student1 = new Student("Waw","waaw","awaw","waaw","waaw");
    studentArray.push(student1);
    document.write("<table>");
    document.write("<thead><tr><th>Full Name</th><th>Email</th><th>Phone</th><th>Category</th><th>Group</th></tr></thead>");
    document.write("<tbody>");
    for(i = 0; i < studentArray.length; i++){
    document.write("<tr><td>" + studentArray[i].fullName +"</td><td>" + studentArray[i].email +"</td><td>" + studentArray[i].phone +"</td><td>" + studentArray[i].category +"</td><td>" + studentArray[i].groupID +"</td></tr>");
    }
   document.write("</tbody>");
   document.write("</table>"); 
}

Html File:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../script/scripts.js" type="text/javascript"></script>

    </head>
    <body>
        <script>
            makeTable();
            </script>
    </body>
</html>

Output:

https://i.sstatic.net/j5cnN.png

I regulary program in Java normally, however, only reason I could imagine this not working, is as if I made the array the wrong way, or my array still is empty, after inserting student1 into studentArray.

Thanks in advance.

This fiddle shows it working: jsfiddle.net/zqew935L, though it shows that you get a row of undefined values since you start an array with an element equaling your Student function. There is something else wrong with your code that is causing your table to not be populated — Patrick Evans
– Patrick Evans, Commented Sep 4, 2016 at 0:38

Community · Accepted Answer · 2017-05-23 12:16:18Z

1

javascript is a weakly typed language (more about language sthrength)

whith this line you are not defining 'Stundent' as a type for your array but insead you push an object named Student (which does not exist in you context) into your array 'studentArray'. meaning you push undefined or null into stundenArray.

var studentArray = new Array(Student);

if you change it to this you wil create an empty array

var studentArray = new Array();

and then it should work

because some browsers will throw an exception on the following line because the compiler doesn't know about a property on the object pointing to null

document.write("<tr><td>" + studentArray[i].fullName +"</td><td>" + studentArray[i].email +"</td><td>" + studentArray[i].phone +"</td><td>" + studentArray[i].category +"</td><td>" + studentArray[i].groupID +"</td></tr>");

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 4, 2016 at 0:24

NtFreX

11.5k3 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

William Pfaffe Over a year ago

Wow... I am so sorry. I thought, as in java, that I would have to let the array know, which type it should hold... Thank you so much brother.

Patrick Evans Over a year ago

This doesn't answer the visualized problem, an empty table. new Array(Student) would still make a new array. It would start with a single element, which would be the Student function. It would not prevent the loop from displaying the actual Student instance made in makeTable(). This JSFiddle shows it working as is, there is something else wrong with their code

William Pfaffe Over a year ago

So it could be a typo somewhere in the HTML?

Patrick Evans Over a year ago

studentArray[i] wouldn't be null/undefined since their loop is based off the length of their array, and would just get an undefined value for the properties like fullName unless using extremely old browsers but even when testing in IE 6 mode it runs. If it is truly fixed it probably was a js syntax error that got over looked and probably fixed when editing.

NtFreX Over a year ago

propably.. or would have printed a row of 'undefined' if it didn't failed there execpt for those old browsers

Akshay Khetrapal · Accepted Answer · 2016-09-04 00:25:01Z

1

You are pushing the Student function into the array as well, you do not need to do that. It'll end up returning undefined values.

Simply replace

var studentArray = new Array(Student);

with

var studentArray = new Array();

answered Sep 4, 2016 at 0:25

Akshay Khetrapal

2,6865 gold badges26 silver badges39 bronze badges

3 Comments

William Pfaffe Over a year ago

Thanks alot brother... Guess Java had me thinking the array needed a identifier for the array, in order to know which variables to hold. My bad

Patrick Evans Over a year ago

Just like the other answer this doesn't answer the problem, you just went from creating an array initialized with 1 element to one that is empty. It still wouldn't cause there to be an empty table after adding the created student in makeTable()

Akshay Khetrapal Over a year ago

That's true, Patrick. Given the data, this seemed like the first appropriate response and apparently solved William's problem as well. My guess would be the other script file which he's including could be causing a conflict. Or something else, not related to his code, altogether.

Collectives™ on Stack Overflow

Add object from array to table

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related