jQuery / JavaScript object, adding to inside function

Question

I'm struggling with this. I know this is simple when you know how, but I just can't get the hang of it.

I basically want to create an object like this:

data = [{
    a: 1
    b: "test"
    c: 32
}, {
    a: 2
    b: "test2"
    c: 55
}, {
    a: 3
    b: "xyz"
    c: 103
}]

This is just an example of a larger function, so I don't want to do exactly this, but understanding tis will help me do the larger function.

I would've thought the below would work, but it doesn't quite. I'm guessing it just needs a little tweaking:

var data = new Object;

$('.class-name').each(function () {

    var a = $(this).data('a');
    var b = $(this).data('b');
    var c = $(this).data('c');

    data[] = {
        a: a,
        b: b,
        c: c
    }

});

I'm struggling with the adding to object thing and also the fact that I'm declaring the object outside the function.

I've tried data.push but I think I'm getting mixed up with arrays and objects.

Thanks for any help.

You have initialized your `data` variable as an `Object` instead of an `array`. Change `data = new Object` to `data = []` to see if that changes anything. Then continue to use `data.push` — Kyle, Jun 26 '13 at 12:37

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

var data = [];

//since data is an array
//you can use it's native method `push`
//to add an object or primitive to the next/last index
data.push({
  a: 1,
  b: 'test',
  c: 32
});

You can even add multiple objects to the array at once.

data.push({ a: 2 b: "test2" c: 55 }, { a: 3 b: "xyz" c: 103 });

Or you can create the object separately then add it later.

var someObj = {
   a: 123,
   b: 'hello',
   c: 789
};

data.push(someObj);

See related

edited May 23 '17 at 12:05

Community

1
1

answered Jun 26 '13 at 12:37

John Strickler

25,151
4
52
68

I've marked this as the answer as it was one of the first and was the one that I followed to get this working. All answers are excellent and Palash Mondal's was probably the most detailed. I can't accept all answers and accepting none isn't helpful, so I've gone with this one. Thanks to everyone. – user2143356 Jun 26 '13 at 14:15

Jonathan Naguin · Answer 2 · 2013-06-26T13:05:31.113

1

You have to d̶e̶c̶l̶a̶r̶e̶ initialize the data variable as an array and later "push" news object:

var data = [];

$('.class-name').each(function () {

    var a = $(this).data('a');
    var b = $(this).data('b');
    var c = $(this).data('c');

    data.push({
        a: a,
        b: b,
        c: c
    });

});

edited Jun 26 '13 at 13:05

answered Jun 26 '13 at 12:38

Jonathan Naguin

14,526
6
46
75

There are no type declarations in JS. Though you probably mean the right, "*declare variable as*" sounds wrong. – Bergi Jun 26 '13 at 12:50

score 1 · Answer 3 · answered Jun 26 '13 at 12:39

1

Use:

data = []
data.push({ a: 1, b: 'test', c: 52 })

Or directly:

data = [{ a: 1, b: 'test', c: 52 }, { a: 2, b: 'test2', c: 53}]

answered Jun 26 '13 at 12:39

YD1m

5,845
2
19
23

palaѕн · Answer 4 · 2013-06-26T12:53:48.403

To keep things simple, do like this:

// Create an empty Array
var data = [];
$('.class-name').each(function () {

    // Get the data attribute values
    var a = $(this).data('a');
    var b = $(this).data('b');
    var c = $(this).data('c');

    // Create an empty Object
    var obj = {};

    // Set the object key-value pairs
    obj['a'] = a;
    obj['b'] = b;
    obj['c'] = c;

    // Push the object to the 'data' array
    data.push(obj);
});

// Check the data array in the console
console.log(data);

FIDDLE DEMO #1

But you can always minimize it like:

// Create an empty Array
var data = [];
$('.class-name').each(function () {

    // Get the data attribute values
    var a = $(this).data('a');
    var b = $(this).data('b');
    var c = $(this).data('c');

    // Push the object to the 'data' array
    data.push({a:a, b:b, c:c});
});

// Check the data array in the console
console.log(data);

FIDDLE DEMO #2

score 1 · Answer 5 · answered Jun 26 '13 at 12:49

data[] = …

That's PHP syntax, not JavaScript. You want to use the Array push method instead. Make data an array (not a generic object):

var data = new Array;
// or simpler with an empty array literal:
var data = [];

and then

data.push({
    a: a,
    b: b,
    c: c
});

jQuery / JavaScript object, adding to inside function

5 Answers5