Getting values from JSON objects

Question

I have a file named AnimalsData that has an object that consists of an array. The array consists of an object and another array. It looks like this:

var animals = {
    animalClass : [
        {
            className : "Reptiles", 
            animalArray : [
                {   
                    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 : 
                }, "blah, blah, blah"
                {   
                    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 : "blah, blah, blah"
            }, 
            {   
                    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 : "blah, blah, blah"
                }, 
                {   
                    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 : "blah, blah, blah"
                }, 
            ]
        },
        .......etc., etc

My HTML file looks like this:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animal Photo Album</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--<script src="js/handlebars-v3.0.3.js"></script>-->

    <script src="js/AnimalsData.js"></script>
    <script src="js/assignment.js"></script>        

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/myjavascript.css" rel="stylesheet">     
</head>
<body>      
    <main id="content" class="container">
    </main>         
</body>

I'm trying to get the values of the className object from the animalClass array. I have been using the following two stackoverflow pages as a guide:

Accessing Objects in JSON Array and Access / process (nested) objects, arrays or JSON

I have another javascript file which has the following:

EDIT I changed "name" in the for in loop and the jQuery statement to className in order to reduce the confusion.

function executeObject() {
    for(var i = 0; i < animals.animalClass.length; i++) {
        for(var className in animals.animalClass[i].className) {
            $('<p>' + ClassName + '</p>').insertAfter('#content');
        }                   
    }
};

$(function(){   
    executeObject();
});

However, this only produces numbers. I've tried various tweaks to the above but they either end up being undefined or the insert "className" and "animalArray" three times. The examples looked pretty straight forward but I'm obviously missing something.

jrkt · Answer 1 · 2015-11-15T17:05:28.697

2

You are referencing the className, not the animals array.

function executeObject() {
    for(var i = 0; i < animals.animalClass.length; i++) {
        var name = animals.animalClass[i].className;
        $('<p>' + name + '</p>').insertAfter('#content');
    }
};

edited Nov 15 '15 at 17:05

answered Nov 15 '15 at 16:36

jrkt

2,615
5
28
48

Thank you. I am attempting to access the values in className which is not in the animalArray. It appears that I created confusion by using "name" instead of className. My apologies. I have made the appropriate edits to my code. – comfortablyNumb Nov 15 '15 at 17:04
1

I have fixed my answer. So, you don't even need the second loop. You just need to access the className variable inside the first 'for' loop. – jrkt Nov 15 '15 at 17:06

meda · Accepted Answer · 2015-11-15T17:06:24.910

2

Try this

function executeObject() {
    for(var i = 0; i < animals.animalClass.length; i++) {
     $('<p>' +  animals.animalClass[i].className + '</p>').insertAfter('#content');                 
    }
};

edited Nov 15 '15 at 17:06

answered Nov 15 '15 at 16:37

meda

45,103
14
92
122

Thank you. I am attempting to access the values in className which is not in the animalArray. It appears that I created confusion by using "name" instead of className. My apologies. I have made the appropriate edits to my code. – comfortablyNumb Nov 15 '15 at 17:04
That did it. Thank you. I see where I went wrong now. – comfortablyNumb Nov 15 '15 at 17:08

score 0 · Answer 3 · answered Nov 15 '15 at 16:55

0

Do something along these lines.

for(var i=0; i<=animals.animalClass.length; i++){
    var animal_class = animals.animalClass[i];
    console.log(animal_class.animalArray);
    for(var j=0; j<=animal_class.animalArray.length; j++){
        console.log(animal_class.animalArray[j].name);
    }
}

answered Nov 15 '15 at 16:55

Sandeep

28,307
3
32
24

Thank you. I am attempting to access the values in className which is not in the animalArray. It appears that I created confusion by using "name" instead of className. My apologies. I have made the appropriate edits to my code. – comfortablyNumb Nov 15 '15 at 17:05

Getting values from JSON objects

3 Answers3