JSON - Flickr fotogallerij

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

D B

D B

19/05/2015 18:31:49
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
});

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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
        });
    });
}


Als laatste maak ik 2 spans aan om mijn gegevens weg te schrijven.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<span id="data"></span>
<span id="lijst"></span>


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
 
PHP hulp

PHP hulp

31/12/2024 07:53:08
 
Thomas van den Heuvel

Thomas van den Heuvel

19/05/2015 19:45:09
Quote Anchor link
flickr.photos.getInfo retourneert een enkele foto, dus het snijdt geen hout om dit door een .each() te halen.

Bonus: id's (data, lijst) in een loop? ...
 
D B

D B

19/05/2015 20:01:31
Quote Anchor link
Ik had dit in het begin inderdaad ook als enkele foto benaderd, maar kreeg toen ook die undefined, dus dacht ik dat het misschien perse met each doorgelopen moest worden ofzo...

Maar ik kan hem dus gewoon enkel benaderen?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
        });
    });
}


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)
PHP script in nieuw venster Selecteer het PHP script
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
<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
 
Thomas van den Heuvel

Thomas van den Heuvel

20/05/2015 21:16:01
Quote Anchor link
Dit is ingewikkelder dan het lijkt. Het probleem wordt -als ik het zelf ook goed begrijp- in 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):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
            });
        });
    });
}

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
 
D B

D B

21/05/2015 00:49:30
Quote Anchor link
Heb het artikel gelezen en ga vanavond eens wat testen. Begrijp hier eigenlijk uit dat ik alles in 1 function moet zetten, dat ik dus niet met variabelen op en neer kan switchen.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
            });
        });
    });
}
Gewijzigd op 21/05/2015 06:55:53 door D B
 
D B

D B

26/05/2015 22:04:49
Quote Anchor link
Heb ondertussen mijn FotoAlbums mooi weergegeven staan, maar zit nu inderdaad met de volgorde van de albums te stoeien.

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)
PHP script in nieuw venster Selecteer het PHP script
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
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);
            });
        });
    });
}


Kan iemand mij helpen deze albums op dezelfde volgore te krijgen als dat ze in mijn eerste JSON request staan?
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.