jQuery Create Object Literal Loop

Question

I need to loop through a series of DOM elements and create an object literal with jQuery as seen below. I'm guessing this involves the usage of .each, but I'm a bit stuck on what to do next.

    '1': {
        'text': 'Maintain Compliance',
        'desc': 'blah',
        'size': 10,
        'color': '#afb0b3'
    },
    '2': {
        'text': 'lorem ipsum',
        'desc': 'blah.',
        'size': 4,
        'color': '#9b9ca0'
    },
    '3': {
        'text': 'lorem ipsum',
        'desc': 'blah',
        'size': 6,
        'color': '#c5c6c7'
    }

2 revs user1106925 · Accepted Answer · 2011-12-23 21:37:47Z

5

You'd use .map() to create an Array of the objects.

var objects = $('.my_elements').map(function(i,el) {
    var $el = $(el);
    return {
        text:$el.text(),
        desc:'blah',
        size:'some_size_property_of_the_element?',
        color:$el.css('color')
    };
}).get();

The object returned from each iteration is added to the collection.

This version of .map() actually returns a jQuery object, so you need .get() to convert to an Array.

You could use the other $.map to create an Array directly.

var objects = $.map($('.my_elements'), function(el,i) {
    var $el = $(el);
    return {
        text:$el.text(),
        desc:'blah',
        size:'some_size_property_of_the_element?',
        color:$el.css('color')
    };
});

Notice that the parameters are reversed from the first version. Easy to get caught on that.

And by the way, you're not really creating an "object literal". You're just creating an object. "Object literal" is a notation used to create objects.

Also, I've assumed by your numeric indices that you want an Array of objects. If the main structure shouldn't be an Array, then it will need to be a little different, like this...

var objects = {};

$('.my_elements').each(function(i,el) {
    var $el = $(el);
    objects[ i+1 ] = {
        text:$el.text(),
        desc:'blah',
        size:'some_size_property_of_the_element?',
        color:$el.css('color')
    };
});

This starts the numbering on 1 as shown in the question. Though I'd still be inclined to use an Array.

edited Dec 23, 2011 at 21:37

community wiki

2 revs
user1106925

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

6 Comments

Ash Blue Over a year ago

It works perfectly except for 1 thing. It names my objects "object' instead of a number. I need "object" to have a numerically incrementing name such as 1, 2, 3, 4, 5 ect.

Ash Blue Over a year ago

Here is a nice visual example of what I have and what I need screencast.com/t/fbXme1UTjnL

Ash Blue Over a year ago

Disregard proto junk at the bottom of the image.

user1106925 Over a year ago

...looking at the screenshot, yes the first one is an Array with numeric indices. The Object just shows that the item at each index is indeed an Object. It isn't the property name. My last solution should give you the indices starting at 1.

Ash Blue Over a year ago

You just saved Christmas (in a postmodern fashion).

|

Collectives™ on Stack Overflow

jQuery Create Object Literal Loop

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related