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.

meda · Accepted Answer · 2015-11-15 17:06:24Z

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, 2015 at 17:06

answered Nov 15, 2015 at 16:37

meda

45.5k14 gold badges96 silver badges123 bronze badges

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

2 Comments

comfortablyNumb Over a year ago

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 Over a year ago

That did it. Thank you. I see where I went wrong now.

jrkt · Accepted Answer · 2015-11-15 17:05:28Z

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, 2015 at 17:05

answered Nov 15, 2015 at 16:36

jrkt

2,7857 gold badges35 silver badges55 bronze badges

2 Comments

comfortablyNumb Over a year ago

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.

jrkt Over a year ago

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.

Sandeep · Accepted Answer · 2015-11-15 16:55:48Z

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, 2015 at 16:55

Sandeep

29.5k3 gold badges35 silver badges24 bronze badges

1 Comment

comfortablyNumb Over a year ago

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.

Collectives™ on Stack Overflow

Getting values from JSON objects

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related