Loop through data attributes and create an array

Question

I have many div elements that in turn have many data attributes.

For each element I want to build an array containing the names and values of the data attributes.

My code looks like this:-

$( "#"+progWindowID ".newItem" ).each( function() {
  var itemData = {
    elemCategory   : $(this).attr( 'data-Category' ),
    elemType       : $(this).attr( 'data-Type' ),
    elemName       : $(this).attr( 'data-Name' ),
    elemTop        : $(this).attr( 'data-Top' ),
    elemLeft       : $(this).attr( 'data-Left' ),
    elemHeight     : $(this).attr( 'data-Height' ),
    elemWidth      : $(this).attr( 'data-Width' ),
    elemCreatedBy  : $(this).attr( 'data-CreatedBy' ),
    elemCreatedOn  : $(this).attr( 'data-CreatedOn' )
  };
}

Can I loop through the data attributes to build the array using each data attribute's name as a key in the array? Then when I add more data attributes later my code will still work.

Zach Leighton · Accepted Answer · 2014-11-17 18:06:03Z

3

Just do $(obj).data(); it will give you a hash of the properties.

Example:

 $( "#"+progWindowID ".newItem" ).each( function() {
   var itemData = $(this).data();
  });

jQuery documentation: http://api.jquery.com/data/

answered Nov 17, 2014 at 18:06

Zach Leighton

1,94114 silver badges25 bronze badges

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

2 Comments

Zach Leighton Over a year ago

Yeah simply hash manipulation would take care of that, but for his stated intent this would work.

cneeds Over a year ago

Cool @Zach, I will simply put "elem" in front of my data keys! And thank you for the documentation link

Collectives™ on Stack Overflow

Loop through data attributes and create an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related