Javascript生成的图像库

我正在尝试使用JS从JSON文件创建动态图像库。最终目的是通过JSON中的嵌套对象移动，获取图像源位置并将它们添加到一个列表中，以便在单个图片框中显示（每个动物都有自己的框，但每个框自动显示/滚动多个图片）。此外，还将获得动物名称和描述，以及每个图片框的覆盖图标题

简化javascript的一个示例（我知道它会在一个图库中显示每只动物的多张图片，但我只想分阶段进行测试以便理解）：

---

指定的JSON格式无效，因为它缺少两个

}

（花括号）和一个

]

（右大括号）。我访问并更正了它

注意：我已将更正后的JSON文件

paws.JSON

保存在Github上。 请用那个

错误行在下图（左侧）中高亮显示。我添加了

]}

来解决JSON的问题

最后，在服务器上尝试下面的HTML代码

注意：我是Django开发人员，所以我使用Django（Python的web框架）来服务web页面。它工作得很好

读取JSON并进行处理
$.getJSON（“paws.json”%}”，函数（数据）{
//log（“很高兴在这里见到你。”）；
//控制台日志（数据）；
var photoHTML=''
//将pets存储到名为pets的变量
var pets=data.petfinder.pets.pet；//这里pets（在paws.json中）有2项
//循环通过宠物阵列
$。每个（宠物，功能（索引，宠物）{
//日志（“PETS索引：”，索引）；
//将照片存储到名为photos的varibale
var photos=pet.media.photos.photo；
//循环浏览照片阵列
$。每个（照片、功能（索引、照片）{
//日志（“照片索引”，索引）；
//控制台日志（照片$t）
photoHTML+=''+宠物描述。$t+''；
})
})
console.log（photoHTML）
$（'#photos'）.html（photoHTML）；
})

---

就是这样。

@airsoftsoldrecn9，

paws.json

的格式不正确。请使用网站上提供的JSON。我已经改正了。您还可以在以下位置检查JSON的有效性：将petfinder.pets更改为data.

petfinder.pets.pet

和pet.media.photos更改为

pet.media.photos.photo

。它会起作用的，不客气。这个很好的问题让我走上了学习jQuery的$.getJSON（）的轨道。我应用了您的解决方案，但我似乎做了一些非常错误的事情。你介意看看下面的网址吗？我很想知道我遗漏了什么：检查paws.json文件是否与html代码所在的目录相同。在我的例子中，index.html和paws.json位于同一目录中。您可以在进行检查，源代码位于。我还检查了您的github存储库，它没有工作代码。我建议您从我的存储库中复制代码以进行尝试。如果您遇到任何问题，请发表评论。现在我知道，您的网站paws_gallery文件夹中没有paws.json文件。这是问题的根本原因。事实上，我只是从github项目中获取了这个概念，所以它不是我的。我的JSON文件仍然有一些定界错误，我已经清除了这些错误（包括petfinder在请求中包含的注释）。我有相当多的重复信息和其他一些问题需要解决，但至少我现在可以解析json文件并抛出图像数据。谢谢你的帮助！

$(document).ready(function() {

function displayPhotos(data) {
  var photoHTML = "";
  $.each(petfinder.pets,function(i,pet) {
      $.each(pet.media.photos,function(i, photo){
        photoHTML += '<div class="picbox"><figure><img src="' + photo.$t + '" class="frame"><figcaption>' + pet.description + '</figcaption></figure></div>';
      });
  }); // end each

  $('#photos').html(photoHTML);
};

$.getJSON("paws.json", displayPhotos);

});

{
  "@encoding": "iso-8859-1",
  "@version": "1.0",
  "petfinder": {
    "@xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "lastOffset": {
      "$t": "25"
    },
    "pets": {
      "pet": [
        {
          "options": {
            "option": [
              {
                "$t": "altered"
              },
              {
                "$t": "hasShots"
              },
              {
                "$t": "noDogs"
              },
              {
                "$t": "noCats"
              }
            ]
          },
          "status": {
            "$t": "A"
          },
          "contact": {
            "phone": {
              "$t": "(618) 833-3647"
            },
            "state": {
              "$t": "IL"
            },
            "address2": {
              "$t": "N/A"
            },
            "email": {
              "$t": "pawsplace1@yahoo.com"
            },
            "city": {
              "$t": "Anna"
            },
            "zip": {
              "$t": "62906"
            },
            "fax": {
              "$t": "N/A"
            },
            "address1": {
              "$t": "139 East Vienna Street"
            }
          },
          "age": {
            "$t": "Adult"
          },
          "size": {
            "$t": "L"
          },
          "media": {
            "photos": {
              "photo": [
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=60&-pnt.jpg",
                  "@id": "1"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=95&-fpm.jpg",
                  "@id": "1"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=500&-x.jpg",
                  "@id": "1"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=300&-pn.jpg",
                  "@id": "1"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/1/?bust=1371662519&width=50&-t.jpg",
                  "@id": "1"
                },
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=60&-pnt.jpg",
                  "@id": "2"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=95&-fpm.jpg",
                  "@id": "2"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=500&-x.jpg",
                  "@id": "2"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=300&-pn.jpg",
                  "@id": "2"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/2/?bust=1371662521&width=50&-t.jpg",
                  "@id": "2"
                },
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=60&-pnt.jpg",
                  "@id": "3"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=95&-fpm.jpg",
                  "@id": "3"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=500&-x.jpg",
                  "@id": "3"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=300&-pn.jpg",
                  "@id": "3"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26443178/3/?bust=1371662522&width=50&-t.jpg",
                  "@id": "3"
                }
              ]
            }
          },
          "id": {
            "$t": "26443178"
          },
          "shelterPetId": {
            "$t": "1"
          },
          "breeds": {
            "breed": [
              {
                "$t": "Labrador Retriever"
              },
              {
                "$t": "Pit Bull Terrier"
              }
            ]
          },
          "name": {
            "$t": "MIKEY"
          },
          "sex": {
            "$t": "M"
          },
          "description": {
            "$t": "Mikey is a Lab/Pit Bull mix who was born in August of 2011,  He was adopted from PAWS after he had been found abandoned out in the middle of nowhere.  The family had him for about a year, and then they got a couple more dogs.  That didn't work out because Mikey prefers to be an only child (dog).  He does well with people, he just prefers not to share them.  He loves to cuddle, wants to be a lap dog, and he will smile for you.   He's a beautiful boy, and he has been neutered, micro-chipped, dewormed, has been tested for heartworms, is current on his routine vacinations and is on a heartworm preventative.  The adoption fee for him is $200.\n"
          },
          "mix": {
            "$t": "yes"
          },
          "shelterId": {
            "$t": "IL09"
          },
          "lastUpdate": {
            "$t": "2013-06-19T17:21:59Z"
          },
          "animal": {
            "$t": "Dog"
          }
        },
        {
          "options": {
            "option": [
              {
                "$t": "altered"
              },
              {
                "$t": "hasShots"
              },
              {
                "$t": "housetrained"
              }
            ]
          },
          "status": {
            "$t": "A"
          },
          "contact": {
            "phone": {
              "$t": "(618) 833-3647"
            },
            "state": {
              "$t": "IL"
            },
            "address2": {
              "$t": "N/A"
            },
            "email": {
              "$t": "pawsplace1@yahoo.com"
            },
            "city": {
              "$t": "Anna"
            },
            "zip": {
              "$t": "62906"
            },
            "fax": {
              "$t": "N/A"
            },
            "address1": {
              "$t": "139 East Vienna Street"
            }
          },
          "age": {
            "$t": "Adult"
          },
          "size": {
            "$t": "M"
          },
          "media": {
            "photos": {
              "photo": [
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=60&-pnt.jpg",
                  "@id": "1"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=95&-fpm.jpg",
                  "@id": "1"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=500&-x.jpg",
                  "@id": "1"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=300&-pn.jpg",
                  "@id": "1"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/1/?bust=1476815920&width=50&-t.jpg",
                  "@id": "1"
                },
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=60&-pnt.jpg",
                  "@id": "2"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=95&-fpm.jpg",
                  "@id": "2"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=500&-x.jpg",
                  "@id": "2"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=300&-pn.jpg",
                  "@id": "2"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/2/?bust=1476815921&width=50&-t.jpg",
                  "@id": "2"
                },
                {
                  "@size": "pnt",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=60&-pnt.jpg",
                  "@id": "3"
                },
                {
                  "@size": "fpm",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=95&-fpm.jpg",
                  "@id": "3"
                },
                {
                  "@size": "x",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=500&-x.jpg",
                  "@id": "3"
                },
                {
                  "@size": "pn",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=300&-pn.jpg",
                  "@id": "3"
                },
                {
                  "@size": "t",
                  "$t": "http://photos.petfinder.com/photos/pets/26605681/3/?bust=1476815922&width=50&-t.jpg",
                  "@id": "3"
                }
              ]
            }
          },
          "id": {
            "$t": "26605681"
          },
          "shelterPetId": {
            "$t": "2"
          },
          "breeds": {
            "breed": {
              "$t": "Domestic Short Hair"
            }
          },
          "name": {
            "$t": "DELILAH"
          },
          "sex": {
            "$t": "F"
          },
          "description": {
            "$t": "Delilah is a beautiful gray tortoiseshell female who was  born around  the middle of March, 2013.; She and her brother and sisters were owner surrendered because their family didn't have their mom spayed; she had kittens; and they didn't want the kittens.; Delilah is just a gorgeous, dignified lovely lady who would like nothing more than to spend hours on your lap just purring and keeping you company!  Come get her and give her that chance today!  We guarantee you will never regret it!"
          },
          "mix": {
            "$t": "yes"
          },
          "shelterId": {
            "$t": "IL09"
          },
          "lastUpdate": {
            "$t": "2013-07-07T12:24:24Z"
          },
          "animal": {
            "$t": "Cat"
          }
        }
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read JSON and process</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<!-- Populate all the photos and descriptions here-->
<div id='photos'>
</div>

<!-- Code to grab pets/photos and creating div elements -->
<script type="text/javascript">
$.getJSON("paws.json' %}", function(data){
      // console.log("It's great to see you here.");
      // console.log(data);
      var photoHTML = ''

      // Storing pets to a variable named pets
      var pets = data.petfinder.pets.pet; // Here pets(in paws.json) has 2 items

      // Loop through pets array
      $.each(pets, function(index, pet){
          // console.log("PETS INDEX :", index);
          // Storing photos to a varibale named photos
          var photos = pet.media.photos.photo;
          // Loop through photos array
          $.each(photos, function(index, photo){
              // console.log("PHOTO INDEX ", index);
              // console.log(photo.$t)
              photoHTML += '<div class="picbox"><figure><img src="' + photo.$t + '" class="frame"><figcaption>' + pet.description.$t + '</figcaption></figure></div>';
          })
      })
      console.log(photoHTML)
      $('#photos').html(photoHTML);
})
</script>

</body>
</html>