How to access array within an object within an array?

Question

I have both an object and an array:

var elementsArr = [];
var elements = {
    polygon: 734,
    infoContent: "huhu",
    id: 0
}

I am going to have multiple "elements" and push each one into "elementsArr".

for(var i=0; i<20; i++){
   elements.id = id +=1;
   elementsArr.push(elements);
}

My problem now is how to access a specific "id" within the object elements, within the array elementsArr and pushing this into another array.

I tried this but it doesn't seem to be working:

var ids = [];
for(var m=0; m<elementsArr.length; m++){
                if(elements.id == elementsArr[m]){
                ids.push(elements.id);
                }

How do I do this?

Answer 1

Your code is pushing the same object onto the array over and over again.

One way to fix that would be to write a function to get a new element:

function Element(id) {
  return {
    polygon: 734,
    infoContent: "huhu",
    id: id
  };
}

for(var i=0; i<20; i++){
   elementsArr.push(Element(i));
}

If there are going to be a lot of elements, and the "id" values are all relatively small numbers, you'd be better off storing the elements such that the "id" is also the index:

for (var i = 0; i < 20; i++)
  elementsArr[i] = Element(i);

To get the element with "id" 17, then:

var element17 = elementsArr[17];

If you really want to search, however, you can use .find() :

var element17 = elementsArr.find(function(elem) { return elem.id === 17; });

or a simple loop:

for (var i = 0; i < elementsArr.length; ++i) {
  if (elementsArr[i].id === 17) {
    // found it!
  }
}

You can extract the "id" values from the array with a simple call to .map() :

var ids = elementsArr.map(function(elem) { return elem.id; });

or another for loop:

var ids = [];
for (var i = 0; i < elementsArr.length; ++i)
  ids.push(elementsArr[i].id);

Answer 2

There are a couple of ways to do this. If you are able to work in ES6 then a WeakMap would be great.

However, I'm going to give you an ES5 instead.

Option 1 Loop through the data.

If you aren't accessing the data often, then looping through as you've done so may be the best choice.

Option 2 Set up your own index

On the other hand, if you need faster lookup, you can set up your own separate index to look things up.

var elementsLookup = {};  // Create an empty object.
for(var i=0; i<20; i++){
   elements.id = id +=1;
   elementsLookup[id] = elements;  // Stash off a copy
   elementsArr.push(elements);
}

Then you can look things up with a

var elem = elementsLookup[2]; // Get the element with an id of 2.

Answer 3

It is easy to do it with Array prototyping. Here is a function findById

Array.prototype.findById = function(id){
    for(var x = 0 ; x < this.length; x++){
        if(this[x].id == id){
            return this[x];   
        }
    }
    return false;
}

You can use this function to recieve any id from the array or false if it does not exists

elementsArr.findById(17);