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"
}
}
}
1 个答案:
答案 0 :(得分：2)
指定的JSON不是有效形式，因为缺少两个}（curley braces）和一个]（右大括号）。我访问了https://jsoneditoronline.org并进行了更正。
注意：我已将更正的JSON文件
paws.json保存在Github上的this web page。 请使用那个。
错误行在下图中突出显示（左侧）。我添加了]}}来解决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>
就是这样。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？