Trouble Making array in javascript

Question

I am having trouble in making array in javascript. First I made like this

for(var i=1; i <= rowCount-1; i++)
    {  
        product[i-1] = [{
            'product_id' : $('#product_id' + i).val(),
            'name' : $('#item' + i).val(),
            'model' : $('#model' + i).val(),
            'reward' : $('#reward' +i).val(),
            'subtract' : $('#subtract' + i).val(),
            'minimum' : $('#minimum' + i).val(),
            'shipping' : $('#shipping' + i).val(),
            'tax_class_id' : $('#tax_class_id' + i).val(),
            'weight' : $('#weight' + i).val(),
            'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
            'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
            'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
        }];
    }

After passing it as argument in ajax post I can see that it passing it as

product[0][0][minimum]  
product[0][0][model]    326
product[0][0][name] apple mac power
product[0][0][price]    100.0000
product[0][0][product_id]   50
product[0][0][quantity] 5
product[0][0][reward]   0
product[0][0][shipping] 1
product[0][0][subtract] 1
product[0][0][tax_class_i...    0
product[0][0][total]    500
product[0][0][weight]   0.00000000
product[1][0][minimum]  
product[1][0][model]    326
product[1][0][name] apple mac power
product[1][0][price]    100.0000
product[1][0][product_id]   50
product[1][0][quantity] 7
product[1][0][reward]   0
product[1][0][shipping] 1
product[1][0][subtract] 1
product[1][0][tax_class_i...    0
product[1][0][total]    700

but I want something like this

product[0][name] = "apple mac power"

so I changed my code to this

for(var i=1; i <= rowCount-1; i++)
{  
    product = [{
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    }];
}

So after doing this it is showing only array of 1 row no matter of how many rowCount I have like this

product[0][minimum]  
product[0][model]    326
product[0][name] apple mac power
product[0][price]    100.0000
product[0][product_id]   50
product[0][quantity] 7
product[0][reward]   0
product[0][shipping] 1
product[0][subtract] 1
product[0][tax_class_i...    0
product[0][total]    700

Can anyone help me.?

Thanks in advance..

Answer 1

You are creating an array of arrays. Take out the second array, like this:

for(var i=1; i <= rowCount-1; i++)
{  
    product[i-1] = {        // Removed array open
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    };       // Removed array close
}

In JavaScript, [ ] creates an array, so [ {object} ] creates a single cell array.

Also keep in mind that product[0]["name"] is the same as product[0].name -- in JavaScript, a property can also be used in index syntax. product is your array, each cell in the array is an object, which has properties including name.

Answer 2

In your first version, you are assigning an array to array so, It is displaying as 2d array. and in you second version you are always assigning your product variable to new value, so it is containing only one product information. So you can update your first version by removing [ and ] like

for(var i=1; i <= rowCount-1; i++)
{
    product[i-1] = {
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    };
}

or you can modify your second version as

for(var i=1; i <= rowCount-1; i++)
{  
    product.push({
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    });
}

Hope It will help.

Answer 3

product[0]['name'] = "apple mac power"

or

product[0].name = "apple mac power"

instead of

product[0][name] = "apple mac power"

your first way is good, but you add an array with an hash inside only remove the [] around

product[i-1] = {
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    };

instead of

product[i-1] = [{
        'product_id' : $('#product_id' + i).val(),
        'name' : $('#item' + i).val(),
        'model' : $('#model' + i).val(),
        'reward' : $('#reward' +i).val(),
        'subtract' : $('#subtract' + i).val(),
        'minimum' : $('#minimum' + i).val(),
        'shipping' : $('#shipping' + i).val(),
        'tax_class_id' : $('#tax_class_id' + i).val(),
        'weight' : $('#weight' + i).val(),
        'quantity' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').val(),
        'price' : $('table.order-table tbody tr[id=\''+ i +'\']').find('td.price').html(),
        'total' : $('table.order-table tbody tr td.quantity input[name=\'quantity'+ i +'\']').parent().parent().find('td.total').html()
    }];