jQuery Join Object Values

Question

I am trying to join the values of an object/associative array to make changes to my code easier but I can't figure out how to properly join them. Here is my code:

$( document ).on( "click", ".taskstatus a", function ( event ) {
    event.preventDefault();
    classes = {
        'OPEN': 'state_open',
        'COMPLETED': 'state_completed',
        'SKIPPED': 'state_skipped',
        'REJECTED': 'state_rejected'
    };
    joinedClasses = classes.map(function(value, key){ return key; }).join(' ');
    state = $(this).data('state');
    taskID = $(this).closest('.task').attr('id').replace( 'task_', '' );

    // Update checkbox icon
    $(this).closest('.taskwrap').find('.taskcheckbox').data( 'icon', $(this).data('icon') );

    // Update task class
    alert( joinedClasses );
    $(this).closest('.task').removeClass( joinedClasses ).addClass( classes[state] );

});

This code breaks at the map function since it doesn't see it as an array, whats the best way to accomplish joining the values of class so that they look like this: "state_open state_completed state_skipped state_rejected"?

Jamiec · Accepted Answer · 2014-04-02 14:41:46Z

20

You can use jQuery.map function. It is more forgiving and therefore allows usage on an associative array (like yours) as well as a traditional array:

joinedClasses = $.map(classes, function(e){
    return e;
});

result:

["state_open", "state_completed", "state_skipped", "state_rejected"]

live example: http://jsfiddle.net/MK4f7/

this can then be joined using a space in the same way as your original:

joinedClasses = $.map(classes, function(e){
    return e;
}).join(' ');

answered Apr 2, 2014 at 14:41

Jamiec

136k15 gold badges142 silver badges202 bronze badges

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

Comments

Rick Lancee · Accepted Answer · 2014-04-03 05:14:25Z

2

Since it's not an array you can use map. You need to use a for loop like below:

var classes = {
    'OPEN': 'state_open',
    'COMPLETED': 'state_completed',
    'SKIPPED': 'state_skipped',
    'REJECTED': 'state_rejected'
};

// Create a tmp array for the join
var joined = [];

// Loop over the object Literal.
// the var key is now the prop in the object.
for (var key in classes) {
    var val = classes[key]; // gets the value by looking for the key in the object
    joined.push(val);
}

// Join the array with a space.
joined = joined.join(' ');

Working fiddle

EDIT: accepted answer is better if you want to do it with jQuery, cheers.

edited Apr 3, 2014 at 5:14

answered Apr 2, 2014 at 14:35

Rick Lancee

1,6591 gold badge15 silver badges20 bronze badges

Comments

y.aoki · Accepted Answer · 2014-04-02 14:54:46Z

0

If you can load linq.js, try this code:

joinedClasses = Enumerable.From(classes).Select("$.Value").ToArray().join(' ');

answered Apr 2, 2014 at 14:54

y.aoki

511 silver badge4 bronze badges

Collectives™ on Stack Overflow

jQuery Join Object Values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related