javascript - Javascript 生成的图片库
问题描述
我正在尝试使用 JS 从 JSON 文件创建动态图片库。最终目的是通过 JSON 中的嵌套对象移动，获取图像源位置并将它们添加到列表中以显示在单个图片框内（每个动物都有自己的框，但每个框会自动显示/滚动多张图片）。还获得了动物名称和描述，作为每个图片框的叠加显示的图形标题。
一个简化的 javascript 示例（我知道它会在画廊中为每只动物显示多张图片，但我只是想分阶段测试以供理解）：
$(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);
});
JSON数据如下：
{
"@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"
}
}
}
解决方案
指定的 JSON 格式无效，因为它缺少两个}（大括号）和一个]（右大括号）。我访问了https://jsoneditoronline.org并更正了它。
注意：我已经在 Github
paws.json上的这个网页上保存了更正后的 JSON 文件。请使用那个。
下图（左侧）中突出显示了错误行。我已添加]}}以解决 JSON 的问题。
最后，在您的服务器上尝试以下 HTML 代码。
注意：我是 Django 开发人员，所以我使用 Django（Python 的 Web 框架）来提供网页服务。它工作得很好。
<!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>
而已。
推荐阅读
- asp.net - Asp.Net Mvc 加载进度
- shell - Shell 脚本拆分 du -sh * 结果
- php - 将对象转换为 laravel 分页
- perl - 如何存储在 Perl 脚本中加密的数据库密码？
- c - 比较 2 个线性/连续 2D 阵列
- python - 比较熊猫数据框中的两个字符串并显示差异
- python-3.x - 在 Azure 函数中使用类和外部 py 文件
- multithreading - 处理 Scala 期货内存不足错误
- react-native - React Flatlist - 尝试订购商品数据
- vb.net - 从 VB.net 代码上的 WIndows server 2008 迁移到 Windows server 2016 后，MICR 符号在输出设备上呈现较小