Using concatenation and a passed parameter to loop through an array

Question

var Animals = {
    "Europe": { "weasel.jpg": "squeak", "cow.jpg": "moo"},
    "Africa": { "lion.jpg": "roar", "gazelle.jpg": "bark"},         
};

function region(a){
    var b = "Animals."+a;
    for(var index in b) {
        var target = document.getElementById('div1');
        var newnode = document.createElement('img');
        newnode.src = index;
        target.appendChild(newnode)
    }
}

RELEVANT HTML

<li onclick="europe('Europe')">Europe</li>

Goal: on the click of the Europe <li>, pass the word Europe into my region function where it is then concatenated to produce Animals.Europe

This is in order to identify an array within the object structure at the top using the for(var index in Animals.Europe) loop. Why is the concatenation which produces Animals.Europe not treated in the same way as if I had typed this out?

In addition, you can see that I have used arrays to store an image source and description for different animals. Using my limited coding knowledge this was all I could think of. Is there an easier way to store image/description data in order to produce in HTML?

Did you mean onclick="region('Europe')"?

elclanrs
– elclanrs

2013-01-06 06:02:30 +00:00
Commented Jan 6, 2013 at 6:02 — elclanrs
– elclanrs, Commented Jan 6, 2013 at 6:02

JLRishe · Accepted Answer · 2013-01-06 06:03:30Z

1

"Animals." + a is just a string value, e.g. "Animals.Europe", which is not the same thing as Animals.Europe. If you change the first line to var b = Animals[a];, you should be all set.

Edit: and as elclanrs pointed out, it should be region('Europe'), not europe('Europe').

answered Jan 6, 2013 at 6:03

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kieran · Accepted Answer · 2013-01-06 06:05:17Z

1

Why is the concatenation which produces Animals.Europe not treated in the same way as if i had typed this out?

In this case the variable b is just a string ("Animals.Europe"), which is treated like any other string (i.e. a list of characters). This means that when you attempt to loop through it (for(index in b)) you will be looping over a simple list of characters.

What you can do instead is use the square brace notation of accessing an objects properties. This means you can instead write var b = Animals[a], retrieving attribute a from Animals. You can read more about working with objects in this way on this MDN page

answered Jan 6, 2013 at 6:05

kieran

1,53710 silver badges10 bronze badges

Comments

Jad · Accepted Answer · 2013-01-06 06:22:51Z

0

You can access the europe property using the following

Animals[a]

Also you're calling a "europe" function when you should be calling "region"

You're not storing animals in arrays here, but in objects with the image names as keys. Usually you'll want to use relevant names as keys. For example if you want arrays of animals for each continent

var Animals = {
    "Europe": [{ 
      imageSrc: "weasel.jpg",
      cry: "squeak"
    },{
      imageSrc: "cow.jpg",
      cry: "moo"
    }],
    "Africa": [{
      imageSrc: "lion.jpg",
      cry: "roar"
    },{
      imageSrc: "gazelle.jpg",
      cry: "bark"
    }]         
};

Now Animals['Europe'] gives an array of objects, where you could eventually store other properties. So if b is an array your loop will now look like:

var b = Animals['Europe'];

for(var i=0; i < b.length; i++) {
    var target = document.getElementById('div1');
    var newnode = document.createElement('img');
    var animalData = b[i];   // The array item is now an object
    newnode.src = animalData.imageSrc;
    target.appendChild(newnode)
}

edited Jan 6, 2013 at 6:22

answered Jan 6, 2013 at 6:11

Jad

9328 silver badges14 bronze badges

2 Comments

DVCITIS Over a year ago

Thanks for the response, very much appreciated. I've not experimented with arrays/objects too much.. the reason I set the keys as the image names was so i could produce images from each continent was so i could loop through using *** for(var index in Animals.Europe) { *** and then use the index variable from each run through the loop to create an img element using *** var newnode = document.createElement('img'); newnode.src = index; *** If I used the example above, how would I loop through the imageSrc properties to extract the .jpg data?

Jad Over a year ago

You'll get the hang of it :) I edited my reply with a loop example. It really depends if you are going to use the animal's cry, or add more details about each animals. If all you'll ever store is the image names, just have each continent give an array of image names.

Collectives™ on Stack Overflow

Using concatenation and a passed parameter to loop through an array

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related