jQuery $ .getJSON - Come analizzare una chiamata all'API REST di flickr.photos.search?

Cercando di adattare l'esempio $ GetJSON Flickr:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", 
    function(data){ 
    $.each(data.items, function(i,item){ 
     $("<img/>").attr("src", item.media.m).appendTo("#images"); 
     if (i == 3) return false; 
    }); 
});

di leggere dal metodo API REST flickr.photos.search, ma la risposta JSON è diverso per questa chiamata.

Questo è quello che ho fatto finora:

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20"; 
var src; 
$.getJSON(url + "&format=json&jsoncallback=?", function(data){ 
    $.each(data.photos, function(i,item){ 
     src = "http://farm"+ item.photo.farm +".static.flickr.com/"+ item.photo.server +"/"+ item.photo.id +"_"+ item.photo.secret +"_m.jpg"; 
     $("<img/>").attr("src", src).appendTo("#images"); 
     if (i == 3) return false; 
    }); 
});

Credo che non sto costruendo lo src immagine correttamente. Impossibile trovare alcuna documentazione su come creare l'immagine src, in base a quale sia la risposta JSON. Come si analizza una chiamata all'API REST di flickr.photos.search?

fonte

2010-03-25 Chaddeus

Non importa, ho capito. Per coloro che sono interessati, è analizzato in questo modo:

var url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20"; 
var src; 
$.getJSON(url + "&format=json&jsoncallback=?", function(data){ 
    $.each(data.photos.photo, function(i,item){ 
     src = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg"; 
     $("<img/>").attr("src", src).appendTo("#images"); 
     if (i == 3) return false; 
    }); 
});

Avviso del .photo è stato spostato al metodo $ .Ogni firma.

fonte

2010-03-25 08:48:15 Chaddeus

Grazie mille. Mi ha salvato anni di lavoro. – frostymarvelous

nessun problema, felice di poterti aiutare. – Chaddeus

Con questo metodo, la chiave API è esposta. Avete qualche preoccupazione/protezione intorno a questo? – yoshyosh

Questo potrebbe essere semplificata scegliendo il 'url_m' extra parametro e il parametro per_page ...

extras=url_m&per_page=4

Poi tutto quello che serve è questo all'interno del ciclo ...

$("<img/>").attr("src", item.url_m).appendTo("#images");

fonte

2012-02-27 10:55:52 tcmorris

Per l'accesso il Flickr API, è necessario utilizzare https: //:

var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURAPIKEYHERE&tags=yokota+air+base&safe_search=1&per_page=20"; 
var src;

fonte

2015-03-13 23:07:57

la documentazione API jQuery per jQuery .getJSON() ha un utile esempio qui: http://api.jquery.com/jquery.getjson/

La documentazione fornisce un file completo come esempio di come analizzare la chiamata API; carica le quattro immagini più recenti di Mount Rainier dall'API JSONP di Flickr. Ristamperò il file qui come contesto aggiuntivo che potrebbe essere utile, in particolare per chi è nuovo nell'utilizzo delle API.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery.getJSON demo</title> 
    <style> 
    img { 
    height: 100px; 
    float: left; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<div id="images"></div> 

<script> 
(function() { 
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    $.getJSON(flickerAPI, { 
    tags: "mount rainier", 
    tagmode: "any", 
    format: "json" 
    }) 
    .done(function(data) { 
     $.each(data.items, function(i, item) { 
     $("<img>").attr("src", item.media.m).appendTo("#images"); 
     if (i === 3) { 
      return false; 
     } 
     }); 
    }); 
})(); 
</script> 

</body> 
</html>

fonte

2015-10-21 05:19:27

jQuery $ .getJSON - Come analizzare una chiamata all'API REST di flickr.photos.search?

risposta

Problemi correlati