Question

我有一个名为AnimalsData的文件，其中包含一个由数组组成的对象。该数组由一个对象和另一个数组组成。它看起来像这样：

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

我的HTML文件如下所示：

<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>

我试图从animalClass数组中获取className对象的值。我一直在使用以下两个stackoverflow页面作为指南：

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

我有另一个javascript文件，其中包含以下内容：

编辑我改变了＃34;名称＆＃34;在for循环中，将jQuery语句改为className，以减少混淆。

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();
});

然而，这只会产生数字。我已经对上面的内容进行了各种调整，但它们最终都是未定义的或插入＆＃34; className＆＃34;和＆＃34; animalArray＆＃34;三次。这些例子非常简单，但我显然遗漏了一些东西。

Answer 1

您正在引用className，而不是animals数组。

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

Answer 2

试试这个

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

Answer 3

沿着这些方向做点什么。

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);
    }
}

从JSON对象获取值

3 个答案: