Jquery retrieving data from multiple data attributes with with array/JSON values

Question

I'm having several elements on my page with the same data attribute, although different values. The elements are formatted like so:

<input type="radio" data-toggle='["one","two","three"]'/>

Now, I want to get the data from all those elements, and I thought I could just do:

var data = $('[data-toggle]').data("toggle");

But this only outputs the data from the first element, all other elements with that data-attribute is ignored.

I'm guessing this has to do with it beeing arrays/JSON formatted, but I'm not clear about why this is the case, and how I should go about retrieving all my values.

How can I get all data from all those data attributes?

Here is a fiddle illustrating my problem: http://jsfiddle.net/6u67o9oo/

tymeJV · Accepted Answer · 2015-08-12 18:20:04Z

6

You'd have to iterate over each element:

$('[data-toggle]').each(function() {
    var data = $(this).data("toggle");

    //Do stuff
});

Or you could use .map to get a 2D array of all the data-toggle attributes:

var newArray = $('[data-toggle]').map(function() {
    return $(this).data("toggle");
}).get();

answered Aug 12, 2015 at 18:20

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Jquery retrieving data from multiple data attributes with with array/JSON values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related