JSON - Flickr fotogallerij
Ik probeer via de Flickr API mijn foto's op te halen, helaas weet ik nog vrij weinig van javascript/jquery, maar door het doen probeer ik verder te komen.
Wat ik heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=x&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $("<ul></ul>");
$.each(setdata.photosets.photoset, function(a, set) {
GetCoverPic(set.primary);
var link = $("<a/>").attr("title", set.description._content)
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank")
.text(set.title._content + " (" + set.description._content + ") ");
var li = $("<li/>").append(link).append(" (" + set.photos + ")");
$(list).append(li);
});
$("#lijst").append(list);
});
var list = $("<ul></ul>");
$.each(setdata.photosets.photoset, function(a, set) {
GetCoverPic(set.primary);
var link = $("<a/>").attr("title", set.description._content)
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank")
.text(set.title._content + " (" + set.description._content + ") ");
var li = $("<li/>").append(link).append(" (" + set.photos + ")");
$(list).append(li);
});
$("#lijst").append(list);
});
Hiermee krijg ik netjes een lijst van mijn albums op flickr, dit bovenstaande begrijp ik ondertussen vrij aardig. Nu wil ik dit uit gaan breiden door bij ieder album de primary foto op te halen. Deze staat in de photoset meegeschreven als zijnde primary="".
Nu weet ik ondertussen dat ik deze met onderstaande JSON kan ophalen en probeer ik hier een function voor te schrijven.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function GetCoverPic(photo_id){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
$.each(photodata.photo, function(b, photo) {
alert(photo.id);
});
});
}
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
$.each(photodata.photo, function(b, photo) {
alert(photo.id);
});
});
}
Als laatste maak ik 2 spans aan om mijn gegevens weg te schrijven.
Ik krijg nu als alert UNDEFINED, dus daar zit ergens de fout denk ik, maar ik zie de fout niet.
Kan iemand mij hiermee op weg helpen?
Gewijzigd op 19/05/2015 18:44:15 door D B
Bonus: id's (data, lijst) in een loop? ...
Maar ik kan hem dus gewoon enkel benaderen?
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function GetCoverPic(photo_id){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
alert(photodata.photo.id);
});
});
}
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
alert(photodata.photo.id);
});
});
}
Dit lijkt inderdaad te doen wat ik wil.
Nu ga ik even verder puzzelen om mijn <img src> te krijgen zoals ik hem graag zou hebben.
Toevoeging op 20/05/2015 19:37:54:
Ondertussen weer een stapje verder, maar zit nu vast. Mijn kennis reikt nu echt nog niet ver genoeg.
Dit is wat ik nu heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
GetAlbums();
function GetAlbums(){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=x&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $("<ul></ul>");
$.each(setdata.photosets.photoset, function(a, set) {
var photoalbum_cover = GetCoverPic(set.primary);
var link = $("<a/>")
.attr("title", set.description._content)
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank")
.text(set.title._content + " (" + set.description._content + ") ");
var li = $("<li/>").append(link).append(" (" + set.photos + ")");
$(list).append(li);
});
$("#lijst").append(list);
});
}
function GetCoverPic(photo_id){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
var photo = $("<img/>")
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var photodiv = $("<div/>")
.attr("class","fotodiv");
var photoalbum_cover = $(photodiv).append(photo);
return photoalbum_cover;
});
}
</script>
GetAlbums();
function GetAlbums(){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=x&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $("<ul></ul>");
$.each(setdata.photosets.photoset, function(a, set) {
var photoalbum_cover = GetCoverPic(set.primary);
var link = $("<a/>")
.attr("title", set.description._content)
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank")
.text(set.title._content + " (" + set.description._content + ") ");
var li = $("<li/>").append(link).append(" (" + set.photos + ")");
$(list).append(li);
});
$("#lijst").append(list);
});
}
function GetCoverPic(photo_id){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + photo_id + "&format=json&jsoncallback=?", function(photodata) {
var photo = $("<img/>")
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var photodiv = $("<div/>")
.attr("class","fotodiv");
var photoalbum_cover = $(photodiv).append(photo);
return photoalbum_cover;
});
}
</script>
Ik wil dus in de functie GetAlbums mijn functie GetCoverPic aanroepen om er de eerste foto bij te halen. Afgezonderd van elkaar werkt dit perfect. Maar nu probeer ik mijn GetCoverPic 'uitkomst' in mijn GetAlbums te verwerken. Maar dit lukt me niet.
Wat ik nu return bij GetCoverPic is volgens mij een object en dat lijkt dus niet te werken. Kan iemand mij een beetje op weg helpen, hoe ik dit het beste aan kan pakken?
Alvast bedankt!
Ps. Dit is de pagina waar ik mee test: http://www.zscwesterhoven.nl/fotostest.php
Gewijzigd op 20/05/2015 19:38:32 door D B
deze reactie op StackOverflow redelijk goed omschreven. Het komt er op neer dat de hele "ketting" van functies asynchroon (lees: met callback functies) moet werken, een mix van synchroon en asynchroon gaat niet, waarschijnlijk omdat je anders niet kunt bepalen wanneer een functie zijn resultaat "beschikbaar" heeft.
Je moet dit dus in 1x afhandelen, of je structuur anders opzetten. Dit heeft tevens tot gevolg dat de volgorde van de albums kan verschillen, tis maar net welke respons je als eerste / eerder binnen krijgt.
Wat misschien een betere oplossing is, is dat je het resultaat cached, zodat je deze nog een beetje kan rangschikken ofzo. Dan hamer je ook niet elke keer op die API met tig requests per page-refresh :p.
De eerste variant (alles in 1x) kan bijvoorbeeld als volgt. Dit is misschien niet helemaal wat je wilt, maar wel iets dat werkt. Hier zou je misschien zelf ook nog een callback aan kunnen breien, zodat deze na afloop van het ophalen van alle covers je bulleted list nog even in de goede volgorde zet ofzo (op grond van een of andere parameter):
EDIT: come to think of it, misschien kun je de calls van flickr.photos.getInfo synchroon laten verlopen door de volgende foto pas op te halen als je de huidige binnen hebt. Dit moet dan ook weer met een callback :]. Mogelijk resulteert dit wel in een iets langere laadtijd doordat je alle requests achter elkaar zet.
Dit is ingewikkelder dan het lijkt. Het probleem wordt -als ik het zelf ook goed begrijp- in Je moet dit dus in 1x afhandelen, of je structuur anders opzetten. Dit heeft tevens tot gevolg dat de volgorde van de albums kan verschillen, tis maar net welke respons je als eerste / eerder binnen krijgt.
Wat misschien een betere oplossing is, is dat je het resultaat cached, zodat je deze nog een beetje kan rangschikken ofzo. Dan hamer je ook niet elke keer op die API met tig requests per page-refresh :p.
De eerste variant (alles in 1x) kan bijvoorbeeld als volgt. Dit is misschien niet helemaal wat je wilt, maar wel iets dat werkt. Hier zou je misschien zelf ook nog een callback aan kunnen breien, zodat deze na afloop van het ophalen van alle covers je bulleted list nog even in de goede volgorde zet ofzo (op grond van een of andere parameter):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function GetAlbums(){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=x&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $('<ul\/>');
// iets andere volgorde - hang list meteen op aan #lijst, en genereer de lijst dynamisch
$('#lijst').append(list);
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $("<li/>").append($link.append($coverImage));
$(list).append(li);
});
});
});
}
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=x&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $('<ul\/>');
// iets andere volgorde - hang list meteen op aan #lijst, en genereer de lijst dynamisch
$('#lijst').append(list);
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=x&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $("<li/>").append($link.append($coverImage));
$(list).append(li);
});
});
});
}
EDIT: come to think of it, misschien kun je de calls van flickr.photos.getInfo synchroon laten verlopen door de volgende foto pas op te halen als je de huidige binnen hebt. Dit moet dan ook weer met een callback :]. Mogelijk resulteert dit wel in een iets langere laadtijd doordat je alle requests achter elkaar zet.
Gewijzigd op 20/05/2015 21:37:42 door Thomas van den Heuvel
Heeft iemand nog een aanvulling hoe dit precies op te lossen? Flickr API heeft namelijk een mooie sorteer optie, maar weet niet of ik doe dus kan handhaven.
Toevoeging op 21/05/2015 18:07:37:
Zoals het er nu naar uit ziet werkt dit.
Ik ben nog wel aan het stoeien met het .append en variabelen aan elkaar zetten. Ik wil nu namelijk het UL en LI weghalen, maar om elke image een div zetten met een class.
Heb nu dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function GetAlbums(key){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" + key + "&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $('<ul\/>');
$('#lijst').append(list);
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $imagediv = $('<div\/>')
.attr("class", "photodiv");
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $("<li/>").append($link.append($coverImage));
$(list).append(li);
});
});
});
}
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" + key + "&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
var list = $('<ul\/>');
$('#lijst').append(list);
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $imagediv = $('<div\/>')
.attr("class", "photodiv");
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $("<li/>").append($link.append($coverImage));
$(list).append(li);
});
});
});
}
Gewijzigd op 21/05/2015 06:55:53 door D B
Op Flickr staan ze mooi op volgorde, als ik in mijn getList request kijk krijg ik ze ook mooi op volgorde, maar op de pagina worden ze uiteindelijk random neergezet. Ik denk zelf dat dit komt door de each loop, welke eerst binnen is.
Dit is mijn code zoals ik hem nu gebruik:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function GetAlbums(key){
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" + key + "&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
var $album = $('<div\/>')
.attr("class", "album");
var $albumtitle = $('<div\/>')
.attr("class", "albumtitle")
.text(set.title._content);
var $albumdescription = $('<div\/>')
.attr("class", "albumdescription")
.text(set.description._content);
var $albumviews = $('<div\/>')
.attr("class", "albumviews")
.text(set.count_views + "x bekeken");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $coveroverlaybottom = $('<div\/>')
.attr("class", "coveroverlaybottom");
var $coveroverlaytop = $('<div\/>')
.attr("class", "coveroverlaytop");
var $albumcover = $('<div\/>')
.attr("class", "albumcover");
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $album.append($link.append($albumcover.append($coverImage)).append($coveroverlaybottom.append($albumdescription).append($albumviews)).append($coveroverlaytop.append($albumtitle)));
$('#list').append(li);
});
});
});
}
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key=" + key + "&user_id=133322121@N07&format=json&jsoncallback=?", function(setdata) {
$.each(setdata.photosets.photoset, function(a, set) {
var $link = $("<a/>")
.attr("title", set.title._content + ' (' + set.description._content + ')')
.attr("href", "http://www.flickr.com/photos/mjryall/sets/" + set.id)
.attr("target", "_blank");
var $album = $('<div\/>')
.attr("class", "album");
var $albumtitle = $('<div\/>')
.attr("class", "albumtitle")
.text(set.title._content);
var $albumdescription = $('<div\/>')
.attr("class", "albumdescription")
.text(set.description._content);
var $albumviews = $('<div\/>')
.attr("class", "albumviews")
.text(set.count_views + "x bekeken");
$.getJSON("https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=" + key + "&photo_id=" + set.primary + "&format=json&jsoncallback=?", function(photodata) {
var $coveroverlaybottom = $('<div\/>')
.attr("class", "coveroverlaybottom");
var $coveroverlaytop = $('<div\/>')
.attr("class", "coveroverlaytop");
var $albumcover = $('<div\/>')
.attr("class", "albumcover");
var $coverImage = $('<img\/>')
.attr("src", "https://farm" + photodata.photo.farm + ".staticflickr.com/" + photodata.photo.server + "/" + photodata.photo.id + "_" + photodata.photo.secret + "_q.jpg")
.attr("alt",photodata.photo.description._content)
.attr("class","photoalbum");
var li = $album.append($link.append($albumcover.append($coverImage)).append($coveroverlaybottom.append($albumdescription).append($albumviews)).append($coveroverlaytop.append($albumtitle)));
$('#list').append(li);
});
});
});
}
Kan iemand mij helpen deze albums op dezelfde volgore te krijgen als dat ze in mijn eerste JSON request staan?