Adding items to an object through the .push() method

Question

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.

It is not possible that your second example works if you really are initializing "stuff" as you describe. — Pointy
– Pointy, Commented Aug 31, 2011 at 18:17
maybe i've tried that example when stuff was initialized as "var stuff = [];". I think you're right, yeah... — dperitch
– dperitch, Commented Sep 1, 2011 at 7:11

jondavidjohn · Accepted Answer · 2015-02-17 22:35:00Z

151

.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

edited Feb 17, 2015 at 22:35

answered Aug 31, 2011 at 18:13

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Иван Олейник · Accepted Answer · 2015-07-06 13:24:14Z

22

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}

answered Jul 6, 2015 at 13:24

Иван Олейник

3313 silver badges7 bronze badges

Comments

AnNaMaLaI · Accepted Answer · 2015-08-25 08:41:41Z

17

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');

edited Aug 25, 2015 at 8:41

AnNaMaLaI

4,08412 gold badges58 silver badges95 bronze badges

answered Aug 31, 2011 at 18:12

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

1 Comment

Joseph Silber Over a year ago

This does not explain why stuff.push( {'name':$(this).attr('checked')} ); works. Honestly, it shouldn't.

C47 · Accepted Answer · 2017-04-17 20:51:46Z

14

This is really easy: Example

//my object
var sendData = {field1:value1, field2:value2};

//add element
sendData['field3'] = value3;

answered Apr 17, 2017 at 20:51

C47

67110 silver badges20 bronze badges

Comments

Kenny Horna · Accepted Answer · 2018-08-04 17:43:48Z

7

Another way of doing it would be:

stuff = Object.assign(stuff, {$(this).attr('value'):$(this).attr('checked')});

Comments

Narciso Ferreira · Accepted Answer · 2022-04-28 10:19:01Z

-1

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}

answered Apr 28, 2022 at 10:19

Narciso Ferreira

455 bronze badges

Collectives™ on Stack Overflow

Adding items to an object through the .push() method

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related