jQuery $ .getJSON - Как мне проанализировать вызов API REST flickr.photos.search? - PullRequest
Новая
       10

jQuery $ .getJSON - Как мне проанализировать вызов API REST flickr.photos.search?

13 голосов
/ 25 марта 2010

Попытка адаптировать пример $ .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;
    });
});

для чтения из метода REST API flickr.photos.search, но ответ JSON отличается для этого вызова.

Это то, что я сделал до сих пор: 

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;
    });
});

Полагаю, я неправильно строю образ src. Не удалось найти никакой документации о том, как создать образ src, основываясь на ответе JSON. Как вы анализируете вызов API REST flickr.photos.search?

Ответы [ 4 ]

25 голосов
/ 25 марта 2010

Неважно, я понял. Для тех, кто заинтересован, это разбирается так: 

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;
    });
});

Обратите внимание, что .photo был перемещен в подпись метода $ .each.

5 голосов
/ 27 февраля 2012

Это можно упростить, выбрав дополнительный параметр 'url_m' и параметр per_page ... 

extras=url_m&per_page=4

Тогда все, что вам нужно, это внутри цикла ... 

$("<img/>").attr("src", item.url_m).appendTo("#images");
3 голосов
/ 14 марта 2015

Чтобы получить доступ к Flickr API, вы должны использовать 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;
2 голосов
/ 21 октября 2015

В документации по jQuery API для jQuery.getJSON () есть полезный пример: http://api.jquery.com/jquery.getjson/

В документации представлен полный файл в качестве примера того, как анализировать вызов API; он загружает четыре самых последних изображения горы Рейнир из API-интерфейса Flickr JSONP. Я перепечатаю здесь файл в качестве дополнительного контекста, который может быть полезен, особенно для новичков в использовании 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...