How to relate or associate an object in JavaScript to an HTML element?

Question

For each object in an array, I generate a checkbox input element based on that object.

If I add an event listener to capture the checkbox changes, how do I retrieve the object associated with that element?

Related: [Custom attributes - Yay or nay?](http://stackoverflow.com/questions/992115/) — Piotr Dobrogost, Sep 11 '11 at 10:07

score 5 · Answer 1 · answered Sep 10 '11 at 15:55

5

As other answers point out, generating a unique id for each DOM node allows you to use those as keys in an Object.

Another possibility is that many frameworks provide utilities for assigning data to DOM elements. For example, in jQuery you can do it by writing $(checkbox).data('mydata', obj) or in YUI Y.one(checkbox).setData('mydata', obj).

answered Sep 10 '11 at 15:55

juandopazo

6,283
2
26
29

2

Although you don't need any framework to assign value to DOM element. Simple `checkbox.mySrcObject = objects[i]` will do. +1 – Piotr Dobrogost Sep 11 '11 at 10:00
Update to @PiotrDobrogost's suggestion: Now with HTML5, the standard is to give such custom attributes a name starting with `data-`. This ensures that they never conflict with current or future standard HTML attributes. The remainder of the name is up to you. E.g. `checkbox.data-tag = objects[i]` fits HTML5's standard. This attribute can then be accessed in your JS code, like any other attribute. – ToolmakerSteve Aug 28 '20 at 19:28
.. actually, since the attribute name has "-" in it, you can't just say `your_ob.data-tag`. To declare in html: ``. OR set in JS: `checkbox.setAttribute("data-tag", ...);`Then in your event listener, assuming the event param is named `event`, use `event.target.getAttribute('data-tag')` to access the value. – ToolmakerSteve Aug 28 '20 at 19:48

Jose Faeti · Answer 2 · 2011-09-10T15:54:06.843

1

You give a progressive ID to each checkbox, starting from "checkbox0", and when you click on a checkbox you check the relative ID number, which correspond to the object in array[x].

Here is a really simple example.

edited Sep 10 '11 at 15:54

answered Sep 10 '11 at 15:42

Jose Faeti

12,126
5
38
52

Michał Wojciechowski · Accepted Answer · 2011-09-10T15:53:40.883

You can generate an ID for each of the checkboxes, and store the ID in the corresponding object. Then, in the event handler, you can get the ID of the changed checkbox and find the appropriate object based on that by iterating over the array.

To make it even easier to find the object, you can also map the IDs to objects (e.g. objectsByID[someID] = someObject). With this approach, you don't even have to iterate over the array.

Example of how to create the objectsByID map:

var objectsByID = {};

for (var i = 0; i < objects.length; i++) {
    var id = "checkbox_" + i;

    var checkbox = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.setAttribute("id", id);
    // ...

    objectsByID[id] = objects[i];
}

Rob W · Answer 4 · 2011-09-10T16:21:10.897

Create a global object, store additional objects when you're creating the checkboxes, identified by a unique name. Set the name or id attribute of the checkbox element to this unique name.

var source = [];
var data = []; //Your data
var appendTo = document.body;//Anywhere
for(var i=0; i<data.length;i++){
  var identifier = "chk"+i;
  var inp = document.createElement("input");
  inp.type = "checkbox";
  inp.name = identifier;//.name or .id - it's up to your preference
  inp.addEventListener("change", function(ev){
    if(this.checked){
      callback(source[this.name]);//calls function callback, passing the original object as an argument.
    }
  }, true);
  appendTo.appendChild(inp);
  source[identifier] = ...//your object.
}

How to relate or associate an object in JavaScript to an HTML element?

4 Answers4