Question

I am iterating over an table to pick out the form elements from each table row. What am I doing wrong in the below example?

var result = new Array();
var counter = 1;

$('tbody tr', this.el).each(function(){

    var inner = new Array();

    $('input',this).each(function(){
        console.log(this.name, $(this).val());  // Works: sends name/value to console!
        inner[this.name] = $(this).val(); // Appears to be empty
    });

    result[counter] = inner;
    counter++;
});

console.log(result);

Answer 1

You’re doing arrays wrong.

In Javascript, an Array is a special case of object which has numeric keys only and has an interface defined by functions like push:

var myArray = [];
myArray.push("first element");
myArray.push("second element");
myArray.push("third element");

You’re making the very common mistake of trying to use an array like a more generic object, assigning string keys and using x[y] = z notation in order to do so. It’s a hack that sometimes may happen to seem to work, but is not how arrays are supposed to be used.

You have the same problem with inner and with result.

Instead, use the generic object that you were attempting to use in the first place:

var result  = {};     // <!-- create new _object_
var counter = 1;

$('tbody tr', this.el).each(function() {

    var inner = {};   // <!-- create new _object_

    $('input', this).each(function() {
        var val = this.value;

        console.log(this.name, val);
        inner[this.name] = val;
    });

    result[counter] = inner;
    counter++;
});

console.log(result);