use object name in javascript loop of array

Question

I want to loop through an array of objects, check if the name of the object variable is equal to the id of an element passed to the function, and if so set the innerHTML of another object to the name property of the matching object. ex.

var samplearray = new Array();
var Guy1 = new Object();
Guy1.name = "Bill";
Guy1.health = 100;
samplearray.push(Guy1);
Guy2.name = "Dan";
Guy2.health = 125;
samplearray.push(Guy2);
//this is all done previously by a function on pageload

function afunction(id){
for (item in samplearray)
{
    if (item == id.id){
    document.getElementById("changeme").innerHTML=samplearray[item].name;
    }
}}

"item" in the if doesn't seem to refer to the name of the variable. If i check it with a custom var_dump function, it tells me the value is "11" and not "Guy1". I have no idea why.

edit:

the fixed for loop:

for (var item in samplearray)
{
    if (samplearray[item].varname == id.id){
    document.getElementById("changeme").innerHTML=samplearray[item].name';
}}

What is *id*? How are you calling the function? *item* should not be *window* unless you are doing something not shown with *samplearray*. — RobG, Oct 09 '13 at 00:02
In what situation would the following comparison be correct: item == id.id? — Prusprus, Oct 09 '13 at 00:05
It's a function that's called by the onclick(this) by an image. So id.id should refer to the id of the image, and I want to check if this is equivalent to the variable name of the object in the loop. — Cid2196, Oct 09 '13 at 00:07
btw. it's very interesting that you can use var_dump in javascript ;) — lukaleli, Oct 09 '13 at 00:10
Objects don't have names in the sense you seem to be asking. Multiple variables can refer to the same object. You should add an id property to your objects and test that in the loop. (Also you shouldn't use a for..in loop on an array.) — nnnnnn, Oct 09 '13 at 00:12
thanks nnnnnn, your comment helped me fix this. I did just that, but I don't understand why the for...in loop shouldn't be used with an array. @jimmyweb - I had to create the function first, which was done with the aid of google. It works beautifully. — Cid2196, Oct 09 '13 at 00:27
In JS you should use a traditional for loop on arrays rather than for..in. [Here is why](http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea). — nnnnnn, Oct 09 '13 at 00:52

RobG · Accepted Answer · 2013-10-09T03:55:47.550

I don't quite understand what you're doing, but here's some comments on your code:

> var samplearray = new Array();
> var Guy1 = new Object();
> Guy1.name = "Bill"; 
> Guy1.health = 100;
> samplearray.push(Guy1);
> Guy2.name = "Dan";
> Guy2.health = 125;
> samplearray.push(Guy2);

It is considered better style (and a bit tidier) to use object and array initialisers*:

var guy1 = {name: "Bill", health: 100};
var guy2 = {name: "Dan", health: 125};
var samplearray = [guy1, guy2]

Also, variable names starting with a capital letter are, by convention, reserved for constructor functions.

> //this is all done previously by a function on pageload

You need to wait for elements to be available before interacting with them, waiting for the load event is one way of doing that.

> function afunction(id) {

What is id? You seem to treat it like an object later.

Ah, so id is a reference to an element, and id.id should return the element id.

>   for (item in samplearray) {

You should declare variables so they do not become globals, so:

    for (var item in samplearray) {

It's generally not a good idea to use for..in with an array because the order that members are returned may be different to their index order. Also, it will return all enumerable properties, including those on the prototype chain so you should guard against that if it's not what you want. Much better to use a for loop so you can guarantee the order and avoid non–numeric enumerable properties:

  var item;
  for (var i=0, iLen=samplearray.length; i<iLen; i++) {
    item = samplearray[i];

>     if (item == id.id){

So item will be a reference to an Object member of samplearray and id.id is a string so this will always return false, none of the following code will run.

>       document.getElementById("changeme").innerHTML=item.name;

In the for..in version, item is a string property name, but you are treating it like an object so this will throw an error and script execution will stop.

In the for loop version, it's a reference to one of the objects in samplearray so the above should "work".

>     document.getElementById("changeme").innerHTML=samplearray[item].name;

This should have worked provided item was a numeric property name and not some other enumerable property.

>     //neither does this
>     } }}

* Intialiser is a general term for an expression that creates an object (such as an Object, Array, Regular Expression, etc.). Where the initialiser uses literal values it may be called a "literal".

thanks, you were actually writing this while I was still making edits to the question (one of the comments helped me to figure it out, and I found an error in a part of my code I didn't post that was causing an error I edited out while you were typing). This is very very helpful though, all the comments about my code are things I was unaware of. id was passed via a onclick(this) method of an image. Also, I didn't use an initialiser because of the way the array is constructed in another part of my code. — Cid2196, Oct 09 '13 at 00:36
@MichaelGeary - The term "initialisers" is actually used by the ECMAScript specification, and by easier to read guides like MDN, and is applied to both "object literals" and "array literals". The term "object literal", on the other hand, is not normally used for arrays - but your edit has applied it to plain objects and an array. — nnnnnn, Oct 09 '13 at 03:23

score 1 · Answer 2 · answered Oct 09 '13 at 00:20

1

var Guy1 = new Object();

In this statement, the Guy1 object has no reference to the string "Guy1". The object exists without the variable. Indeed, the next statement could say:

var friend = Guy1;

and the object Guy1 object would be unchanged.

Besides this, I think you are getting confused about how the for...in loop works. Try reading more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

If you really want your Guy1 object to have a property of "Guy1", you will need to assign it as such:

Guy1.varname = 'Guy1';

And then you can check if (item.varname == id.id) once your for...in loop works correctly.

answered Oct 09 '13 at 00:20

Sean Adkinson

8,425
3
45
64

thanks, I actually got it working from nnnnnn's comment above, didn't have a chance to update. This is exactly what I did, and I fixed the for...in loop. So what is wrong with using the loop like the edit I made? – Cid2196 Oct 09 '13 at 00:22
Why using `for...in` on an array can be bad: http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iteration-such-a-bad-idea – Sean Adkinson Oct 09 '13 at 00:35

use object name in javascript loop of array

2 Answers2