2010-03-25 2 views
13

:

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

는 flickr.photos.search의 REST API 메소드로부터 읽어하지만, 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를 구축하지 것 같아. JSON 응답에 기반하여 이미지 src를 빌드하는 방법에 대한 문서를 찾을 수 없습니다. flickr.photos.search REST API 호출을 어떻게 구문 분석합니까?

답변

25

신경 쓰지 마라. 관심이 그 사람들을 위해, 그것은과 같이 분석 것 :

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 메소드 서명로 이동했다.

+1

감사합니다. 나에게 오래 된 일을 구했어. – frostymarvelous

+0

걱정할 필요가 없습니다. 기꺼이 도와 드리겠습니다. – Chaddeus

+0

이 방법을 사용하면 API 키가 노출됩니다. 이 문제에 대해 어떤 우려 나 보호가 있습니까? – yoshyosh

5

이 ... 매개 변수와 per_page 매개 변수 엑스트라 'url_m'를 선택하여 간단하게 할 수

extras=url_m&per_page=4 

그럼 당신이 필요로하는 모든이가 루프 내에 ...에 액세스하려면

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

플리커 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; 
1

jQuery를위한 jQuery를 API 문서 .getJSON()에는 유용한 예제가 있습니다. http://api.jquery.com/jquery.getjson/

이 문서는 API 호출을 구문 분석하는 방법의 예로서 전체 파일을 제공합니다. Flickr JSONP API에서 가장 최근에 마운트 레이니어 사진 4 장을로드합니다. 이 파일을 특히 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>