简体   繁体   English

从JSON对象获取值

[英]Getting values from JSON objects

I have a file named AnimalsData that has an object that consists of an array. 我有一个名为AnimalsData的文件,该文件具有一个由数组组成的对象。 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文件如下所示:

<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. 我正在尝试从animalClass数组中获取className对象的值。 I have been using the following two stackoverflow pages as a guide: 我一直在使用以下两个stackoverflow页面作为指导:

Accessing Objects in JSON Array and Access / process (nested) objects, arrays or JSON 访问JSON数组中的对象访问/处理(嵌套)对象,数组或JSON

I have another javascript file which has the following: 我有另一个具有以下内容的JavaScript文件:

EDIT I changed "name" in the for in loop and the jQuery statement to className in order to reduce the confusion. 编辑我将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();
});

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. 我已经尝试了以上各种调整,但是它们要么最终未定义,要么插入了“ className”和“ animalArray”三遍。 The examples looked pretty straight forward but I'm obviously missing something. 这些示例看起来很简单,但是我显然缺少了一些东西。

You are referencing the className, not the animals array. 您引用的是className,而不是animals数组。

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

Try this 尝试这个

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM