Storing Objects and Arrays with .data()

Storing Complex Data

Store entire objects or arrays on elements — useful for attaching API response data to UI cards without re-fetching.

Example

$.getJSON("/api/users", function(users) {
  users.forEach(function(user) {
    const card = $(`<div class="card user-card">${user.name}</div>`);
    card.data("user", user);  // attach entire object
    $("#container").append(card);
  });
});

$(document).on("click", ".user-card", function() {
  const user = $(this).data("user");
  console.log(user.email, user.role); // full object accessible
});

JAVASCRIPT

Full Editor

Pro Tip

Storing objects with .data() avoids repeated AJAX calls for data you already have.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned