javascript dynamically add values to array

Question

I'm trying to loop over the checkboxes in a form and add their values to a multidimensional javascript object. The 'attrib' data attribute will be the key. Possible key values are 'category', 'product_group' and 'language' but I'd rather add them dynamically in case any more get added in the future.

I want to end up with an object like this, which I can easily send as a json_encode 'd single value to the server.

values = {
 'category' : {1,2,3},
 'product_group' : {4,5,6},
 'language': {'en','fr','de'}
};

Code below. Here obviously each iteration overwrites existing values instead of adding to it. I'm unsure where I can create values[key] as an object ... ?

$('.filter input, .multiselect-container input').change(function() {
 var values = {}
 $('.filter input:checked').each(function() {
 if($(this).is(':checked')) {
 var key = $(this).data('attrib')
 var value = $(this).val()
 values[key] = value
 // values[key].push(value) = calling method push of undefined ...
 }
 else {
 // Remove value
 } 
 })
 console.log(values) 
})

• C3roe: Of course for a new values[key], that hasn’t been accessed so far, trying to call .push will fail, because there is no array to call that method on yet. So check first, if that element is an array already – if not, initialize it as a new array first, and then push the next value to it afterwards.

Answer 1

Your error is due to the fact that values[key] is undefined, therefore does not have a push method.

Try this code:

 if($(this).is(':checked')) {
 var key = $(this).data('attrib')
 var value = $(this).val()
 values[key] = values[key] || [] // initialize with empty array
 values[key].push(value)
 }

• stef: Works! The double pipes line basically means, create a new array if it doesn't exist yet, and avoids having to use an if() statement? Never seen that before, thanks.
• Tibos: Double pipes line is the logical OR operator [developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. This usage is a common way to provide defaults. Use with care though, because any falsy value will be overwritten with the default, not just undefined or null. In this case you have no worries, because arrays are always truthy.
• stef: I knew double pipes = OR, just wondering what it meant in this context. Thanks again for your help.

Answer 2

Not sure that's what you are looking for:

if(!values[key])
 values[key]=new Array();
values[key].push(value);

But this way you can add an array of value to every key.

Answer 3

Try this:

 if($(this).is(':checked')) {
 var key = $(this).data('attrib')
 var value = $(this).val()
 if(typeof values[key] == "undefined")
 values[key] = [];
 values[key].push(value);
 }
 else {
 // Remove value
 } 

Answer 4

First, your data representation is not correct. The object attributes should be arrays like this:

values = {
 'category' : [1,2,3],
 'product_group' : [4,5,6],
 'language': ['en','fr','de']
};

With that data representation, this piece of code will do what you want:

$('.filter input, .multiselect-container input').change(function() {
var values = {}
$('.filter input:checked').each(function() {
 if($(this).is(':checked')) {
 var key = $(this).data('attrib')
 var value = $(this).val()
 values[key] = value
 if (values.key == undefined){
 //Check if key exists. If not, create it as an array
 values[key] = Array()
 values[key].push(value)
 }
 else{
 values[key].push(value)
 }
 }
 else {
 // Remove value
 } 
})
console.log(values) 

})