How to access js object properties via html element?

Question

Hi, I have an array of objects fetched using jQuery.getJSON(). I want every one of my objects to be represented by HTML div element, so when you click the element you have access to all the properties of corresponding object. What is the best way to do it?

I wanted to do it like this:

$('.mydiv').click(function() {
   var id = $(this).attr('id');
   for (i=0; i<myObjectsArray.length; i++){
     for (x in myObjectsArray[i]){
         //..and here I got confused...
     }  
   }
});

Is this approach any good or is there a better way to do it. Thanks.

Answer 1

You can store data in the data property of your jQuery object
docs here