Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 15 down vote favorite
9

Is it possible to loop through a data() object?

Suppose this is my code:

$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

How do I loop through this? Can each() be used for this?

share|improve this question

5 Answers

up vote 8 down vote accepted

jQuery stores all the data information in the jQuery.cache internal variable. It is possible to get all the data associated with a particular object with this simple but helpful plugin:

jQuery.fn.allData = function() {
    var intID = jQuery.data(this.get(0));
    return(jQuery.cache[intID]);
};

With this in place, you can do this:

$('#myelement').data('test1','yay1')
               .data('test2','yay2')
               .data('test3','yay3');

$.each($('#myelement').allData(), function(key, value) {
    alert(key + "=" + value);
});

You could just use matt b's suggestion but this is how to do it with what you have right now.

share|improve this answer
If it's an internal variable, isn't that subject to change in later versions of jquery (probably without notice)? – matt b Apr 21 '09 at 14:16
I'm sure they could, but I'm not sure why they would. Any retooling they might do to the data functionality would likely include this functionality built-in anyways. I don't think it's really a valid reason to shy away from it, but I guess it's a concern to keep in mind. – Paolo Bergantino Apr 21 '09 at 14:21
up vote 11 down vote 
$.each($.data(this), function(i, e) {
   alert('name='+ i + ' value=' +e);
});

This will iterate through each property in 'this' element's data object.

share|improve this answer
This didn't work OOTB for me, I had to slightly modify it: $.each($('#mydiv').data(), function (i, e) { alert(i + ":" + e); }); – saluce Mar 15 at 18:11
up vote 7 down vote

I don't think that there is any function that gives you all of the "keys" of the data that has been added with the data() function, but instead, why not put all of your data into the function under an object / map?

something like this:

var container = new Object();
container.bar = "lorem";
container.foo = "ipsum";
container.cam = "dolores";
$("mydiv").data("container", container);

and then when you want to read the data / iterate through it:

var blah = $("mydiv").data("container");
for(key in blah) {
    var value = blah[key];
    //do whatever you want with the data, such as:
    console.log("The value of ", key, " is ", value);
}
share|improve this answer
up vote 7 down vote

Tested with jQuery 1.4 and tips from @user292614 the following works:

$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' value=' +e);
});
share|improve this answer
up vote 0 down vote

I just tried this but needed some extra data values. If you also got this "problem" then the following should work.

$('#mydiv').data('bar', {name:'lorem', id:'156', price:'199'});

then you can simply extend with the value id

$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' name=' +e.name + ' id='e.id + ' price=' + e.price );
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.