Undefined error I can't figure out

Question

Hey guys...having a math problem. Trying to layout a grid of gray boxes which I want to load thumbnails on top of. I keep getting an error when trying to load the 4th thumbnail. If you remove the 4th person node in the xml it works, but adding the 4th gives me an error?

Code is below.

Any help is greatly appreciated.

package 
{
    import flash.display.MovieClip;
    import flash.geom.Point;

    public class People extends MovieClip
    {

     public function People() 
     {
      draw();
     }

     public function draw():void
     {
      var colors:Array = [0xFF0000, 0x009900];
      var rows:Array = [];

      var xml:XML  = new XML("<data><navitem><person>person1</person><person>person2</person><person>person3</person><person>person4</person></navitem><navitem><person>person1</person><person>person2</person></navitem></data>");

      var j;
      var i;

      for (i in xml.navitem) {
       rows.push(new MovieClip());
       var totRows:Number = 0;
       for (j in xml.navitem[i].person) {
        if(j % 3 == 1){
         totRows++
        }
       }

       if (totRows == 0) {
        totRows = 1
       }

       rows[i].grid = createGrid(3, totRows, 85, 85,25, 25);
       for (j in rows[i].grid) {
        var mc:MovieClip = new MovieClip();
        with (mc) {
         graphics.beginFill(0, .5);
         graphics.drawRect(0, 0, 85, 85);
         graphics.endFill();
        }
        mc.x = rows[i].grid[j].x;
        mc.y = rows[i].grid[j].y;
        rows[i].addChild(mc);
       }
       // add the people
       for (j in xml.navitem[i].person) {
        var mc:MovieClip = new MovieClip();
        with (mc) {
         graphics.beginFill(colors[i], .5);
         graphics.drawRect(0, 0, 85, 85);
         graphics.endFill();
        }
        mc.x = rows[i].grid[j].x;
        mc.y = rows[i].grid[j].y;
        rows[i].addChild(mc);
       }

       addChild(rows[i]);
       rows[i].y = i > 0 ? rows[(i - 1)].y + rows[(i - 1)].height + 25 : 0;
      }

     }

     private function createGrid($columns:int, $rows:int, $xSpacing:int, $ySpacing:int, $xPadding:int, $yPadding:int, $leftToRight:Boolean = true):Array
     {
      var arr:Array = new Array();
      var pt:Point;
      var row:Number;
      var col:Number;
      var num:int = ($columns * $rows);

      for (var i:int = 0; i < num; i++)
      {
       pt = new Point();

       if ($leftToRight)
       {
        row = (i % $columns);
        col = Math.floor(i / $columns);

        pt.x = (row * ($xSpacing + $xPadding));
        pt.y = (col * ($ySpacing + $yPadding));
       }
       else
       {
        row = (i % $rows);
        col = Math.floor(i / $rows);

        pt.x = (col * ($xSpacing + $xPadding));
        pt.y = (row * ($ySpacing + $yPadding));
       }

       arr.push(pt);
      }

      return arr;
     }

    }

}

Answer 1

You have hard coded the number of columns to 3

rows[i].grid = createGrid(3, totRows, 85, 85,25, 25);

Change it to:

rows[i].grid = createGrid(xml.navitem[i].person.length(), totRows, 85, 85,25, 25);

---

Btw, consider using

for(i = 0; i < xml.navitem.length(); i++)

instead of

for (i in xml.navitem)

and typing the variables like var i:Number;

Currently values of i are strings like "0", "1" - it will lead to errors at unexpected points and those might be hard to debug.

update: Initialize number of rows to one instead of zero:

var totRows:Number = 1;

Answer 2

I found my answer. Had to change up the conditional statements as such:

var totRows:int;
if (xml.navitem[i].person.length() % 3 == 0){
    totRows = xml.navitem[i].person.length() / 3;
} else {
totRows = xml.navitem[i].person.length() / 3 + 1;
}