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
– Kyle, Commented Jun 26, 2013 at 12:37

Community · Accepted Answer · 2017-05-23 12:05:26Z

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, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 26, 2013 at 12:37

John Strickler

25.4k5 gold badges55 silver badges70 bronze badges

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

1 Comment

user2143356 Over a year ago

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.

YD1m · Accepted Answer · 2013-06-26 12:39:03Z

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, 2013 at 12:39

YD1m

5,9152 gold badges22 silver badges25 bronze badges

Comments

Bergi · Accepted Answer · 2013-06-26 12:49:52Z

1

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

answered Jun 26, 2013 at 12:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

palaѕн · Accepted Answer · 2013-06-26 12:53:48Z

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

Jonathan Naguin · Accepted Answer · 2013-06-26 13:05:31Z

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, 2013 at 13:05

answered Jun 26, 2013 at 12:38

Jonathan Naguin

14.8k7 gold badges52 silver badges76 bronze badges

1 Comment

Bergi Over a year ago

There are no type declarations in JS. Though you probably mean the right, "declare variable as" sounds wrong.

Collectives™ on Stack Overflow

jQuery / JavaScript object, adding to inside function

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related