Question

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

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?

Answer 1

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];
}