How to get object from array by object's unique property value?

Question

Basically everything is said with the title: how to get the object from array by object's property value which is unique by the way?

---

Situation:

My current strategy is that I gave id attribute to the div of that object's property id (all ids are unique, take a look at Array of objects below) which looks like this:

<div id="3590" class="my-div"></div>

Now, when this div is clicked, I'll get the id attribute and I need to find the right object because I also need to get some other properties and also make some changes to some properties.

---

Why Im doing this:

This seems to be the only way because as I was told in other question that there's no way to access the object, even when this div is one of the object's properties (take a look at Array of objects below).

If that's not true, please let me know. This is super important!

---

Array of objects:

0: myObject
  __e3_: Object
  div: div#3590.my-div
  gm_accessors_: Object
  gm_bindings_: Object
  id: 3590
  latlng: _.K
  map: _.ng
  uh: Object
  __proto__: c

1: myObject
  __e3_: Object
  div: div#3591.my-div
  gm_accessors_: Object
  gm_bindings_: Object
  id: 3591
  latlng: _.K
  map: _.ng
  uh: Object
  __proto__: c

//thousands of objects

There can be thousands of objects in that array and that's why I added word "fastest" to the question: Im concerned about the performance because there's also other stuff going on.

Also, I prefer vanilla JS because Im currently learning it but if you know a good and fast way in jQuery , please go ahead, I'll convert it myself.

---

More details:

• Objects are in array because I also need to iterate them (more often than working with them one-by-one)
• All one-by-one actions are done via click events (user triggered and there's some protection: only one action at a time)

Answer 1

Keep reference to the corresponding object in the element as well.

So, whenever you click an element, the element object itself will have the reference to corresponding object. No need to find from the array.

And yes please be careful with name collisions. Assign object to new key so that object doesn't replace value of element object's existing key.

For old browsers, I am not sure they can even render thousands of elements.

Example:

var element = document.createElement("div");
element.myObj = {id: 3306, name: 'coolBoy'}; //make sure key, 'myObj' in this case,  doesn't already exist.
var myArray = [];
myArray.push(element.myObj); //if you need to keep in array as well.
element.onclick = function(e){ 
  console.log(e.currentTarget.myObj.name); 
};

Answer 2

I'd recommend using a Map collection - it allows for both fast iteration and fast access by key, and is a builtin data structure.

If you don't want to go down the ES6 route (and not use a shim either), a reasonably fast approach would be to keep the array sorted. You can use binary search to access single elements.

Notice that for a thousand objects, there probably won't be an observable difference anyway. Don't prematurely optimise . Just keep your API to access the collection clean so that you can easily swap out the data structure in the future, should there be any need.

Answer 3

function getObjectFromId(id) {
    return ARR.filter(function (obj) {
        return obj.id === id;
    })[0];
}