2016-05-29 5 views
-2

Я хочу получить доступ к image1 из следующей переменной JavaScript.Массив внутри объекта Javascript

Мне нужно поставить источник image1 внутри шаблона ниже.

Я хочу вставить адрес image1 в шаблон на свой код JavaScript.

Как это сделать?

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. " 
       }, 
      ] 
     }, 

    ] 
}; 
+0

шаблоне ниже user2594853

+0

Не добавляйте соответствующую информацию в качестве комментария но используйте [edit] (http://stackoverflow.com/posts/37511275/edit), чтобы добавить его к вопросу с правильным форматированием. –

+0

Вы хотите получить все 'image1' в объекте? – Mohammad

ответ

1

Делают это, как этот

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

Но это будет только показать вам первое изображение первого животного в каждой категории, так как вы не зацикливание через животных.

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

Это будет первая категория (предполагается, что будет больше). Если вы хотите, чтобы сделать это в этом конкретном формате я бы:

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

И соответственно:

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

Для некоторой дополнительной информации:

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

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

Смежные вопросы