Array inside object Javascript

Question

I want to access image1 from the following JavaScript variable.

I need to put the image1 source inside a template below.

I want to insert the image1 url to a template on my JavaScript code.

How do i do that ?

var animals_data = {
    category : [
        {
            name : "Reptiles",
            animals : [
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Coast_Garter_Snake.jpg/500px-Coast_Garter_Snake.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Nerodia_sipedon_shedding.JPG/440px-Nerodia_sipedon_shedding.JPG",
                    name : "Snake",
                    description : "Snakes are elongated"
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crocodilia_collage.jpg/600px-Crocodilia_collage.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Caiman_crocodilus_Tropicario_2.JPG/440px-Caiman_crocodilus_Tropicario_2.JPG",
                    name : "Crocodilia",
                    description : "The Crocodilia "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/500px-Bartagame_fcm.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Lizard_in_Yemen.JPG/440px-Lizard_in_Yemen.JPG",
                    name : "Lizard",
                    description : "Lizards are a widespread group of squamate reptiles"
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Chelonia_mydas_is_going_for_the_air.jpg/440px-Chelonia_mydas_is_going_for_the_air.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Turtle3m.JPG/500px-Turtle3m.JPG",
                    name : "Turtle",
                    description : "Turtles are reptiles "
                },
            ]
        },
        {
            name : "Mammals",
            animals : [
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/440px-AfricanWildCat.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Kittyply_edit1.jpg/440px-Kittyply_edit1.jpg",
                    name : "Cat",
                    description : "The domestic cat (Felis catus or Felis silvestris catus) is a small, usually furry, domesticated, and carnivorous mammal. "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Poligraf_Poligrafovich.JPG/340px-Poligraf_Poligrafovich.JPG",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Cavalier_King_Charles_Spaniel_trio.jpg/440px-Cavalier_King_Charles_Spaniel_trio.jpg",
                    name : "Dog",
                    description : "The domestic dog (Canis lupus familiaris or Canis familiaris) is a domesticated canid which has been selectively bred for millennia for various behaviors, sensory capabilities, and physical attributes. "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Diademed_ready_to_push_off.jpg/440px-Diademed_ready_to_push_off.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Three_chimpanzees_with_apple.jpg/640px-Three_chimpanzees_with_apple.jpg",
                    name : "Primate",
                    description : "A primate is a mammal of the order Primates (Listeni/praɪˈmeɪtiːz/ pry-may-teez; Latin: \"prime, first rank\"). "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/%D0%9C%D1%8B%D1%88%D1%8C_2.jpg/500px-%D0%9C%D1%8B%D1%88%D1%8C_2.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Fancy_mice.jpg/500px-Fancy_mice.jpg",
                    name : "Mouse",
                    description : "A mouse (plural: mice) is a small rodent characteristically having a pointed snout, small rounded ears, a body-length scaly tail and a high breeding rate. The best known mouse species is the common house mouse (Mus musculus). It is also a popular pet. In some places, certain kinds of field mice are locally common. They are known to invade homes for food and shelter."
                },
            ]
        },
        {
            name : "Birds",
            animals : [
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/American_Flamingo_-_Phoenicopterus_ruber.jpg/440px-American_Flamingo_-_Phoenicopterus_ruber.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Caribbean_flamingo.jpg/440px-Caribbean_flamingo.jpg",
                    name : "American flamingo",
                    description : "The American flamingo"
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/600px-Papageitaucher_Fratercula_arctica.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Atlantic_Puffin_Fratercula_arctica.jpg/440px-Atlantic_Puffin_Fratercula_arctica.jpg",
                    name : "Atlantic puffin",
                    description : "The Atlantic puffin "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/%C3%81guila_calva.jpg/440px-%C3%81guila_calva.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Golden_Eagle_in_flight_-_5.jpg/440px-Golden_Eagle_in_flight_-_5.jpg",
                    name : "Eagle",
                    description : "Eagle is a common name for many large birds of prey of the family Accipitridae; "
                },
                {
                    image1 : "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Ara_ararauna_Luc_Viatour.jpg/440px-Ara_ararauna_Luc_Viatour.jpg",
                    image2 : "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Rose-ringed_Parakeet_eating_leaves.JPG/440px-Rose-ringed_Parakeet_eating_leaves.JPG",
                    name : "Parrot",
                    description : "Parrots, also known as psittacines /ˈsɪtəsaɪnz/,[2][3] are birds of the roughly 372 species in 86 genera that make up the order Psittaciformes, found in most tropical and subtropical regions. "
                },
            ]
        },

    ]
};

Do not add relevant information as comment but use [edit](http://stackoverflow.com/posts/37511275/edit) to add it to the question with proper formatting. — t.niese, May 29 '16 at 14:53
Will you please put your template in a code block in your original post? It will make it easier for the community help you — tcmoore, May 29 '16 at 15:14
@charlietfl This question isn't duplicate. This is about get all of `image1` in object. — Mohammad, May 29 '16 at 15:27
@user2594853 I wanted answer your question and created fiddle for it but question closed. See https://jsfiddle.net/qx9cr6xb/ — Mohammad, May 29 '16 at 15:45

score 1 · Answer 1 · answered May 29 '16 at 14:55

1

Do it like this

<img class="crop-img" src="{{animals[0].image1}}" alt=""/>

But this will only show you first animal's first image in each category since you are not looping through animals.

answered May 29 '16 at 14:55

Pawan Nogariya

8,330
12
52
105

score 0 · Answer 2 · answered May 29 '16 at 15:07

animals_data.category[0].animals[0].image1

This will get the first category (Assuming there would be more). If you wanted to do it in that particular format I would:

var animals = animals_data.category[0].animals;

And respectively:

<img class="crop-img" src="{{animals[0].image1}}" alt=""/>

For some extra information:

http://www.w3schools.com/json/json_eval.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON

Array inside object Javascript

2 Answers2