Adding items to an object through the .push() method
JavascriptJqueryArraysPushJavascript Problem Overview
I'm doing a loop through few input elements of 'checkbox' type. After that, I'm adding values and checked attributes to an array. This is my code:
var stuff = {};
$('form input[type=checkbox]').each(function() {
stuff[$(this).attr('value')] = $(this).attr('checked');
});
This works fine, but I'm just wondering if I can do the exact same thing with .push() method in Jquery?
I've tried something like this but it doesn't work:
stuff.push( {$(this).attr('value'):$(this).attr('checked')} );
Edit:
I was trying to use .push() method on Object, but .push() is actually just a method of Array Object.
Javascript Solutions
Solution 1 - Javascript
.push()
is a method of the Built-in Array Object
It is not related to jQuery in any way.
You are defining a literal Object with
// Object
var stuff = {};
You can define a literal Array like this
// Array
var stuff = [];
then
stuff.push(element);
Arrays actually get their bracket syntax stuff[index]
inherited from their parent, the Object. This is why you are able to use it the way you are in your first example.
This is often used for effortless reflection for dynamically accessing properties
stuff = {}; // Object
stuff['prop'] = 'value'; // assign property of an
// Object via bracket syntax
stuff.prop === stuff['prop']; // true
Solution 2 - Javascript
so it's easy)))
Watch this...
var stuff = {};
$('input[type=checkbox]').each(function(i, e) {
stuff[i] = e.checked;
});
And you will have:
Object {0: true, 1: false, 2: false, 3: false}
Or:
$('input[type=checkbox]').each(function(i, e) {
stuff['row'+i] = e.checked;
});
You will have:
Object {row0: true, row1: false, row2: false, row3: false}
Or:
$('input[type=checkbox]').each(function(i, e) {
stuff[e.className+i] = e.checked;
});
You will have:
Object {checkbox0: true, checkbox1: false, checkbox2: false, checkbox3: false}
Solution 3 - Javascript
stuff
is an object and push
is a method of an array. So you cannot use stuff.push(..)
.
Lets say you define stuff
as an array stuff = [];
then you can call push
method on it.
This works because the object[key/value] is well formed.
stuff.push( {'name':$(this).attr('checked')} );
Whereas this will not work because the object is not well formed.
stuff.push( {$(this).attr('value'):$(this).attr('checked')} );
This works because we are treating stuff
as an associative array and added values to it
stuff[$(this).attr('value')] = $(this).attr('checked');
Solution 4 - Javascript
This is really easy: Example
//my object
var sendData = {field1:value1, field2:value2};
//add element
sendData['field3'] = value3;
Solution 5 - Javascript
Another way of doing it would be:
stuff = Object.assign(stuff, {$(this).attr('value'):$(this).attr('checked')});
Read more here: Object.assign()
Solution 6 - Javascript
Today you can use destructuring to make these things for you!
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Destructuring works both for arrays and objects too. You can just put:
let stuff = {
text: "value"
}
// create some other value
const anotherVariable = 10
stuff = {
...stuff,
anotherVariable
}
console.log(stuff)
And the output will be: {text: "value", anotherVariable: 10}