Array method causing JS to entirely not work. How to save values into 2d array and show it?

Question

This works now thanks to the great help of Thunda and ArtyMcFly. For the entire code please look here: http://plnkr.co/edit/Imcl53?p=info Thanks for this suggestion Thunda. First please let me apologize for this sheer amount of code. I just don't know how else to explain my problem in its entirety...

I am new to JS but not programming. I want to do the following:

A user puts his firstname, lastname, age and selects his gender. With a click on the Start button an object is created based on the constructor Mitarbeiter. So far everything is working except that I want to save the values into a 2D-Array. runningNr works as a counter as well as an ID. Afterwards I want to show the 2D array in a table.

My problem: obviously my saveToArray() and showArray() methods cause my entire JS code to not work anymore. I tested this by commenting out both methods and the respective this.saveToArray = saveToArray() and this.showArray = showArray().

I also am not too sure how to actually implement my showArray() method but if I can't even save the values there is no point in thinking about that yet. :/

In addition I am only allowed to do this task with JS.

var runningNr = 0;
var employee = new Array(); // 2D-Array

// Konstruktor
function Mitarbeiter(f, l, a, g) //f = forename, l = lastname, a = age, g = gender
{
    var fname = f;
    var lname = setLName(l);
    var age = a;
    var gender;
    if (g == "Mann")
        gender = false;
    else
        gender = true;
    this.forename = getFName();
    this.lastname = getLName();
    this.age = getAge();
    this.gender = getGender();
    var total = runningNr + 1; // total of objects. runningNr +1 cause runningNr starts at 0
    this.total = getTotalObj();
    var checkboxes = document.forms.meinFormular.elements.gender;
    this.saveToArray = saveToArray();
    /* this.showArray = showArray(); */

    // Getters coming your way


    // Setters coming your way
    function setLName(x)
    {
        lname = x;
    }

    function saveToArray(runningNr, fname, lname, age, gender)
    {
        employee[Id] = new Array();
        employee[Id]["ID"] = runningNr
        employee[Id]["Firstname"] = fname;
        employee[Id]["Lastname"] = lname;
        employee[Id]["Age"] = age;
        employee[Id]["Gender"] = gender;
        runningNumber++; // Increment as this is the ID as well as the row of 2D-Array
    }

    function showArray() // Creating a table to show all informations about employees
    {
        var myTable = "<table>";
        myTable += "<tr>";
        myTable += "<th> ID </th>";
        myTable += "<th> Vorname </th>";
        myTable += "<th> Nachname </th>";
        myTable += "<th> Alter </th>";
        myTable += "<th> IstFrau </th>";
        myTable += "</tr>";

        for (var i = 0; i <= runningNumber; i++)
        {
            for (var j = 0; j <= 5; j++)
            {
                myTable += "<tr>";
                myTable += "<td>"
                employee[i][j]
                "</td>";
            }
            myTable += "</tr>";
        }
        myTable += "</table>";

        document.getElementById("showContent").innerHTML = myTable;
    }
}

function createObject(fname, lname, a, g)
{
    this.g = g[g.selectedIndex].text; // Selected gender (Mann or Frau) is given as a parameter  to Mitarbeiter();
    var obj = new Mitarbeiter(fname, lname, a, this.g);
    obj.saveToArray
}

<input type="text" name="forename" id="forename" value="test">
<input type="text" name="lastname" id="lastname" value="test">
<input type="text" name="age" id="age" value="1"> 
<select id="gender" name="gender" size="2">
<option selected> Mann </option>
<option> Frau </option>
</select>           
<input type="button" value="Start" onclick="createObject(this.form.forename.value, this.form.lastname.value, this.form.age.value, this.form.gender)">
<input type="button" value="Show Obj" onclick="obj.showArray">

<div id="showContent">
</div>

One good way to share so much code is to put it in plnkr.co and post a link on stack overflow. Then people reading it can get nicer formatting, tinker around with it, etc. — Riley Lark
– Riley Lark, Commented Feb 14, 2014 at 14:14
So when you are using the saveToArray are you passing in any arguments ? — Bryce Easley
– Bryce Easley, Commented Feb 14, 2014 at 14:21
@RileyLark I havent heard about plnkr.co but I will have a look at it. @Thunda obj.saveToArray calls the public variable this.saveToArray which calls the method saveToArray(). Being part of the constructor I believe the method will take the private variables fname, lname, age, gender and the global variable runningNr. So yes arguments are passed. Except this is a misinterpreting of myself :/ please correct me if so! — Takeru
– Takeru, Commented Feb 14, 2014 at 14:25
@Takeru I don't think it works like that I think you are just going to have undefined variables being passed in. — Bryce Easley
– Bryce Easley, Commented Feb 14, 2014 at 14:45

Arthur Weborg · Accepted Answer · 2014-02-14 15:37:04Z

1

So I found several issues. (Please see this fiddle for working code... normally you are supposed to separate the functionality but it was doing something odd so I threw everything into the HTML slot for a lack of time. the code displays the employee(s) after you've created the employee and select to show)

You need <form> tags surrounding your input values.

Your saveToArray() method was using javascript object syntax employee[Id]["STRING"] = value where I think simply replacing the strings with indexes should do the trick.

Otherwise you'll have to change it to an array of objects so employee[Id] = new Array() to employee[Id] = {} and in showArray() you'll have to do a for(var key in employee[i]) which iterates through the keys of a javascript object.

Also, Id is never defined anywhere. you're never passing parameters to this.saveToArray

function saveToArray(runningNr, fname, lname, age, gender)
{
    var Id = runningNr; //This works for Id, not sure if it is what you wanted though.
    employee[Id] = new Array();
    employee[Id][0] = runningNr
    employee[Id][1] = fname;
    employee[Id][2] = lname;
    employee[Id][3] = age;
    employee[Id][4] = gender;
    this.runningNr++; // Increment as this is the ID as well as the row of 2D-Array
}

Also, there were some issues with scope. I moved showArray() so it was global and changed some of the syntax.

function showArray() // Creating a table to show all informations about employees
{
    var myTable = "<table>";
    myTable += "<tr>";
    myTable += "<th> ID </th>";
    myTable += "<th> Vorname </th>";
    myTable += "<th> Nachname </th>";
    myTable += "<th> Alter </th>";
    myTable += "<th> IstFrau </th>";
    myTable += "</tr>";

    for (var i = 0; i < runningNr; i++)
    {
        myTable += "<tr>";
        for (var j = 0; j <= employee[i].length; j++)
        {

            myTable += "<td>"+employee[i][j]+"</td>";
        }
        myTable += "</tr>";
    }
    myTable += "</table>";

    document.getElementById("showContent").innerHTML = myTable;
}

edited Feb 14, 2014 at 15:37

answered Feb 14, 2014 at 14:24

Arthur Weborg

8,6705 gold badges32 silver badges68 bronze badges

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

3 Comments

Bryce Easley Over a year ago

Was about to answer and put the undefined variables but you got it covered.

Takeru Over a year ago

Thank you very much. I incorporated almost everything. Finally this works now. :)

Arthur Weborg Over a year ago

Happy to be of assistance! now that you have a working copy you can play around/change things and get things closer to your expectations =] good luck and have fun!

Collectives™ on Stack Overflow

Array method causing JS to entirely not work. How to save values into 2d array and show it?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related