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.stack.imgur.com/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: https://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, Sep 04 '16 at 00:38

score 1 · Accepted Answer · edited May 23 '17 at 12:16

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 '17 at 12:16

Community

1
1

answered Sep 04 '16 at 00:24

NtFreX

10,379
2
43
63

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. – William Pfaffe Sep 04 '16 at 00:26
1

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](https://jsfiddle.net/zqew935L/) shows it working as is, there is something else wrong with their code – Patrick Evans Sep 04 '16 at 00:32
So it could be a typo somewhere in the HTML? – William Pfaffe Sep 04 '16 at 00:39
`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. – Patrick Evans Sep 04 '16 at 00:48
propably.. or would have printed a row of 'undefined' if it didn't failed there execpt for those old browsers – NtFreX Sep 04 '16 at 00:51

score 1 · Answer 2 · answered Sep 04 '16 at 00:25

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 04 '16 at 00:25

Akshay Khetrapal

2,586
5
22
38

1

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 – William Pfaffe Sep 04 '16 at 00:32
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()` – Patrick Evans Sep 04 '16 at 00:35
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. – Akshay Khetrapal Sep 04 '16 at 00:38

Add object from array to table

2 Answers2