Nested for loop for printing a 2d array. Ist iteration undefined?

Question

I have tried many variations of the code below ie swapping in while. I have an array that is created and added to dynamically. It creates an empty league table. When I iterate through the array and print out the table the first loop always comes back undefined? I have console logged everything but cannot work out why. I think it is to do with the inner loop variable but am running out of ideas. Can someone explain why this happens on all the loops? I have read questions on here and some talk about the variable being treated as string on the first loop but did not understand.

league = [];

$('#butt').on('click',function(){
    var name = $('.input1').val();
    x = $('#demo');
    x.html(name);
    person(name,0,0,0,0,0);
});

function person(first,w,d,l,gf,ag) {
    this.Name = first;
    this.wins = w;
    this.draws = d;
    this.lose = l;
    this.goalsfor = gf;
    this.goalsag =ag;
    newTeam = new Array    

    (this.Name,this.wins,this.draws,this.lose,this.goalsfor,this.goalsag);


    league.push(newTeam);
    teamRow = league[0][0];
    makeLeague();
}

function makeLeague(){

    var tableStart = "<table>"
    var tableEnd = "</table>"
    var tableMid ;
    var secondtab = $('#demo1');

    leagueSize = league.length;

    console.log("league length is   " + league.length);

    for(k=0; k<league.length; k++){
        tableMid += "<tr>";
        for(i=0; i< 6; i++){
            tableMid += "<td> " + league[k][i] + "</td>";
        }
        tableMid += "</tr>";
    }

    secondtab.html(tableStart + tableMid + tableEnd);
}

Answer 1

You're using person as a normal function when it should be used as a constructor. Try using new person(name, 0, 0, 0, 0, 0); instead (and perhaps storing it to a variable).

In addition, as John Sheridan mentions , you need to also initialize your tableMid variable before you can append to it, as follows: var tableMid = ""; .

Here's a cleaned-up version of the code. Note the var declarations that you should include to avoid scoping issues.

var league = [];

$('#butt').on('click', function() {
    var name = $('.input1').val();
    var x = $('#demo');
    x.html(name);
    var person = new Person(name, 0, 0, 0, 0, 0);
});

function Person(first, w, d, l, gf, ag) {
    this.Name = first;
    this.wins = w;
    this.draws = d;
    this.lose = l;
    this.goalsfor = gf;
    this.goalsag = ag;
    var newTeam = [this.Name, this.wins, this.draws, this.lose, this.goalsfor, this.goalsag];

    league.push(newTeam);
    var teamRow = league[0][0];
    makeLeague();
}

function makeLeague() {
    var tableStart = "<table>";
    var tableEnd = "</table>";
    var tableMid = "";
    var secondtab = $('#demo1');

    for (var k = 0; k < league.length; k++) {
        var team = league[k];
        tableMid += "<tr>";
        for (var i = 0; i < team.length; i++) {
            tableMid += "<td> " + team[i] + "</td>";
        }
        tableMid += "</tr>";
    }

    secondtab.html(tableStart + tableMid + tableEnd);
}

Answer 2

In your makeLeague() function you should initialize tableMid before using it in the += operations.

var tableMid = '';

Without this tableMid is undefined.

Answer 3

your error comes from league.length being 0 at the for-loop. thats why the loop never gets executed, so tableMid is undefined.

you initialize league at start with

league = [];

that makes it a non-global variable. initialize it with

var league[];

at start, that should work. Additionally you need to initialize tableMid with a empty string, like John Sheridan mentioned, or the addition will fail as undefined.

var tableMid = "";

DEMO

[edit] sry wrong link