0

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)
Improve this question
7
  • 3
    If you need fast selection by id, don't use an array. Commented Feb 2, 2016 at 9:21
  • What are you doing with all these objects, and how often? Why are they in that array, does it have an order? Commented Feb 2, 2016 at 9:22
  • You can use this, which is also very fast. Commented Feb 2, 2016 at 9:23
  • 2
    If you want to know which horse is fastest, you should race them. Not ask others without the context you have. Commented Feb 2, 2016 at 9:24
  • If you already know ID, select by ID and use this operator Commented Feb 2, 2016 at 9:25

3 Answers 3

Reset to default
4

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); 
};
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

+1, this is probably the most simple and efficient solution. You should mention though that expanding DOM elements is prone to name collisions, and that in very old browsers it could lead to memory leaks.
Unique object key? Im not sure Im following you.. Which key are we talking about in the context of your or my example? @Bergi
@Solo , You might accidentally override element object's existing key's value. That's what I meant.
Just a what if question: couldn't I attach all my data to element's object instead and push them to array? Then I could easily iterate and work with the one-by-one because the last action is always done via click events. I haven't figured it all out how JS objects, references etc work but is it possible?
@Solo, yes you can perfectly do that. Objects can be tossed around anyway and anywhere you like. As long as the object exists in memory, another object with reference can find it.
|
1

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.

Improve this answer

2 Comments

I've looked into both Map and Set, unfortunately I didn't like that browser compatibility section was rather red, especially mobile section.. However I will change my strategy when these get widely supported (I don't care about old IEs, any old browsers actually).
You can use one of the many shims available until then, so you don't have to change your API
-1 
function getObjectFromId(id) {
    return ARR.filter(function (obj) {
        return obj.id === id;
    })[0];
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.