Loop through array inside an object in JavaScript

Question

I've got this array

var enemy = {
'level1' : {
    creature :
    {
        creature_name : {
             'Goblin' : {
                info: {
                    'c_name' : 'Goblin',
                    'HP' : '20',
                    'damage' : '3',
                    'loot' : [
                        {name: 'a wooden sword'   , item: 'weapon'  , value: 2}, 
                        {name: 'a golden necklace', item: 'amulet' , value: 1},
                        {name: 'a pair of boots'  , item: 'boots'  , value: 1},
                        {name: 'some cloth legs'  , item: 'legs'  , value: 1},
                        {name: 'a cloth helmet'   , item: 'helm'  , value: 1}
                    ]
                }
             },
             'Cow' : {
                info: {
                    'c_name' : 'Cow',
                    'HP' : '10',
                    'damage' : '1',
                    'loot' : [
                        {name: 'bell'              , item: 'weapon'  , value: 0}, 
                        {name: 'cow hide cloak'    , item: 'cape'  , value: 1}, 
                        {name: 'a wooden sword'    , item: 'weapon'  , value: 2}, 
                        {name: 'a golden necklace' , item: 'amulet' , value: 1},
                    ]
                }
             },
             'Dragon' : {
                info: {
                    'c_name' : 'Dragon',
                    'HP' : '100',
                    'damage' : '5',
                    'loot' : [
                        {name: 'an almighty dragon sword'   , item: 'weapon'  , value: 5}, 
                        {name: 'a dragon tooth', item: 'amulet' , value: 5},
                        {name: 'a pair of dragon boots'  , item: 'boots'  , value: 4},
                        {name: 'a dragon helmet'  , item: 'helm'  , value: 4}
                    ]
                }
             },

        }

    },
},

I want to receive the _creature_name_. I saw foreach loops with arrayname.length but when I try to do enemy.length or enemy.level1.creature.creature_name.length then I get undefined.

your creature_name property is an object, not an array, and therefore doesn't have an intrinsic length property of its own — Alnitak
– Alnitak, Commented Jun 9, 2016 at 7:36

Alnitak · Accepted Answer · 2016-06-09 08:05:56Z

4

Objects (key/value pairs) don't have an intrinsic .length property.

To just get the names as an array you could use:

var names = Object.keys(enemy.level1.creature.creature_name);

or alternatively to just iterate directly over each name:

for (var name in enemy.level1.creature.creature_name) {
    ...
}

Regarding the actual content you're after, you could use:

$('#enemy_list').html('Enemies: <br/>Level1: <br/>' +
    Object.keys(enemy.level1.creature.creature_name).join('<br/>'));

or:

var content = ['Enemies:', 'Level1:'].concat(Object.keys(enemy.level1.creature.creature_name));
$('#enemy_list').html(content.join('<br/>'));

edited Jun 9, 2016 at 8:05

answered Jun 9, 2016 at 7:37

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

5 Comments

GetOn Over a year ago

Thanks! And how do I split them up in 3 different 1 values to place them on the screen individually

DevelopmentIsMyPassion Over a year ago

@GetOn then you should loop on names i think

GetOn Over a year ago

If I loop through it like this:

var names = Object.keys(enemy.level1.creature.creature_name); 	for(var i = 0; i < names.length; i++){ 		$('#enemy_list')[0].innerHTML += 'Enemies: <br />Level 1: <br />' + names[i] + '<br />'; 	}

It places it individually.But.. for example the result is dragon , cow , goblin it places it below each other (which is correct) but ALSO places it 3 times instead of once.

Alnitak Over a year ago

@GetOn that's really a separate question, for which there is almost certainly already an answer on this site.

Alnitak Over a year ago

p.s. never use += with .innerHTML - make a single string variable and then put that in .innerHTML

noa-dev · Accepted Answer · 2016-06-09 07:40:51Z

1

Since objects don't have length properties assigned to the number of properties inside one solution would be to loop classically through the object as following:

for(var prop in enemy['level1'].creature.creature_name){
   console.log(prop)
}

This will print out the name one by one

I prepared it in a jsfiddle also: https://jsfiddle.net/fo8xjr8w/

answered Jun 9, 2016 at 7:40

noa-dev

3,6419 gold badges36 silver badges73 bronze badges

Comments

Akshay Soam · Accepted Answer · 2016-06-09 07:52:51Z

1

var creature_name = enemy.level1.creature.creature_name;

for (var prop in creature_name)
{   
    console.log(prop);
    //this would print Goblin, Cow, Dragon
}

You again have to iterate if you want to traverse further internal details for the loot array.

edited Jun 9, 2016 at 7:52

answered Jun 9, 2016 at 7:42

Akshay Soam

1,6203 gold badges24 silver badges40 bronze badges

1 Comment

Alnitak Over a year ago

In modern ES5 code there is absolutely no need to use an hasOwnProperty check.

Angel ofDemons · Accepted Answer · 2016-06-09 07:45:14Z

0

$('#enemy_list')[0].innerHTML = 'Enemies: <br />Level 1: <br />';
for(var enemy_names in enemy['level1'].creature.creature_name){
    $('#enemy_list')[0].innerHTML += enemy_names + '<br />';
}

You need create a prop for the name inenemy['level1'].creature.creature_name and then foreach enemy_name place it in the containing div. Goodluck!

By the way, your problem with the for loop was that you executed the enemies: <br /> level1: <br /> in your for loop aswell so it would display it 3 times. This method you put the names inside the div containing the text only once.

answered Jun 9, 2016 at 7:45

Angel ofDemons

1,2678 silver badges13 bronze badges

6 Comments

GetOn Over a year ago

this is exactly what I wanted! Places it below each other instead of every name apart inside the text field! thanks

Alnitak Over a year ago

@GetOn it's not actually what you asked for in this question, though. It's also poor code because it uses += with .innerHTML - always a bad idea because it causes the browser to "serialize" the existing content, then adds to the result string, and then deserialize the entire content again.

GetOn Over a year ago

this is what I asked for though. I get every name printed individually on the screen, thats what I asked for. and why is it so bad? Does it cause major bugs / crases etc? Never had any problems with it.

Alnitak Over a year ago

your question made no mention whatsoever of printing, or HTML - that was only in the comments to my answer. For why .innerHTML += is bad, see comment above. It works, but its nasty.

Angel ofDemons Over a year ago

Can you explain me what is better to use @Alnitak so I can update my answer and expend my knowledge?

|

Collectives™ on Stack Overflow

Loop through array inside an object in JavaScript

4 Answers 4

5 Comments

Comments

1 Comment

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

6 Comments

Related