Javascript - use an array for object names then grab properties using a loop

Question

Going crazy trying to do this so I thought I'd get help. I have an array like this:

OBJECTS = ["mainmenu","mainviewer","mainsearch"];

Each of these is an object like this:

mainmenu = {width:250,height:250,backgroundcolor:red};
mainviewer = {width:250,height:250,backgroundcolor:green};
mainsearch = {width:250,height:250,backgroundcolor:blue};

Now the crux of it ... I'm simply trying to get the properties like this:

for (var item in OBJECTS) {
    var name = OBJECTS[item];
    console.log("the width of "+name+" is "+name.width);
}

The console logs back to me:

the width of mainmenu is undefined

Any help greatly appreciated ...

Thanks so much ... worked a treat after reordering the declarations ... so objects first then the array of objects and the for loop ... many many thanks ... EJK — A_nobody
– A_nobody, Commented Oct 19, 2014 at 9:39

jfriend00 · Accepted Answer · 2014-10-19 09:42:26Z

Your OBJECTS array is an array of strings. It's not an array of objects.

Perhaps you meant it to be this:

var mainmenu = {width:250,height:250,backgroundcolor:"red"};
var mainviewer = {width:250,height:250,backgroundcolor:"green"};
var mainsearch = {width:250,height:250,backgroundcolor:"blue"};

var objects = [mainmenu, mainviewer, mainsearch];

FYI, I also had to put quotes around the color names because symbols like red are not defined.

And, if you want to iterate this with a name, you could do this:

var mainmenu = {name: "mainmenu", width:250,height:250,backgroundcolor:"red"};
var mainviewer = {name:"mainview", width:250,height:250,backgroundcolor:"green"};
var mainsearch = {name: "mainsearch", width:250,height:250,backgroundcolor:"blue"};

var objects = [mainmenu, mainviewer, mainsearch];

objects.forEach(function(item) {
    log("the width of "+item.name+" is "+item.width);
});

or, a traditional for loop:

for (var i = 0; i < objects.length; i++) {
    var item = objects[i];
    console.log("the width of "+item.name+" is "+item.width);
});

Working demo: http://jsfiddle.net/jfriend00/abwgjed2/

Note: it is a bad idea to iterate arrays with the syntax for (item in objects). This iterates all properties of the item object, not just array elements. If there are ES5/ES6 polyfills being used, there may be some extra enumerable properties that will show up in the for (item in objects) iteration. Either use .forEach() or for (var i = 0; i < objects.length; i++).

aleha_84 · Accepted Answer · 2014-10-19 09:33:14Z

0

here is demo

var OBJECTS = 
    {
      mainmenu : {width:250,height:250,backgroundcolor:'red'},
      mainviewer : {width:250,height:250,backgroundcolor:'green'},
      mainsearch : {width:250,height:250,backgroundcolor:'blue'}
  }

for (var item in OBJECTS) {
    var name = OBJECTS[item];
    console.log("the width of "+item+" is "+name.width);
}

answered Oct 19, 2014 at 9:33

aleha_84

8,5892 gold badges42 silver badges50 bronze badges

Collectives™ on Stack Overflow

Javascript - use an array for object names then grab properties using a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related