JSON looks like this:
[{"title":"Modern\/Contemporary House of mine.","link":"http:\/\/buildworx-mc.com\/forum\/showthread.php?tid=1718","images":["http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/house1.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House2.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House3.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House4.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House5.png","http:\/\/i1139.photobucket.com\/albums\/n555\/xDJBOUTIx\/House6.png"]}
I can get the title and the link just fine. But I can't get the images because in some there are multiple links.
I'm trying to get each images link to be wrapped in HTML.
$.getJSON("gallery/getScreenshots.php", function (data) {
$.each(data, function (i, image) {
var link = image.link, title = image.title. images = image.images;
$img = $('<img>').attr('src', images);
$('#screenshots').append($img);
});
But the outcome is this:
<img src="http://i1139.photobucket.com/albums/n555/xDJBOUTIx/house1.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House2.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House3.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House4.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House5.png,http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House6.png" alt="">
How can I sort through the array and get each image to append into <img>?
Using a $.each
loop:
$.each(images, function(i,el) {
$('#screenshots').append($('<img>',{'src',el}));
});
Hell Trippy,
This is the code below and working demo here .
var info=[
{
"title": "Modern/Contemporary House of mine.",
"link": "http://buildworx-mc.com/forum/showthread.php?tid=1718",
"images": [
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/house1.png",
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House2.png",
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House3.png",
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House4.png",
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House5.png",
"http://i1139.photobucket.com/albums/n555/xDJBOUTIx/House6.png"
]
}
];
var album=info[0]["images"];
for(i=0;i<album.length;i++)
{ console.log(album[i]);
$('#screenshots').append($('<img>').attr('src', album[i])
.css({'width':'200px','height':200px'}));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.