2010-06-06 3 views
2

내 문제는 태그를 가져 오는 코드를 관리하고 변수를 사용하는 것입니다 (var searchterm = ??????). JSON을 사용하여 먼저 태그으로 "location"태그를 가져오고 flickr의 관련 사진을 표시하고 싶습니다.getJASON의 DATA에 변수를 사용하는 콜백 함수

<!DOCTYPE html> 
<html> 
<head> 
    <style>img{ height: 100px; float: left; }</style> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
</head> 
<body> 
<div id="images"> 

</div> 
<script> 
$.getJSON("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc",function(data){   
       var searchterm=data[location]; 
     }); 


$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+searchterm+"&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; 
      }); 
     });</script> 
</body> 
</html> 
+0

을 참고 - 당신이 시도 할 수있는 작업 실제 예제를 업데이 트를 게시 . – user113716

답변

2

두 번째 $.getJson() 요청이하기 전에 먼저 실행이 완료하고, 첫 번째에서 만든 변수는 어쨌든 두 번째의 범위를 벗어납니다.

두 번째 $.getJson() 요청은 첫 번째 요청에 대한 콜백 내에 배치하여 첫 번째 요청이 완료 될 때까지 실행되지 않도록합니다.

$.getJSON("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc",function(data){   
    var searchterm=data[location]; 

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+searchterm+"&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; 
      }); 
     }); 
}); 

편집 :

가 여기에 첫 번째 통화에 대한 $.ajax()을 사용하는 버전입니다. jsonp을 직접 지정하고 URL에서 콜백을 제거했습니다.

체크 아웃 라이브 예 :http://jsfiddle.net/uGJYr/2/(업데이트)

$.ajax({ 
    url:"http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json", 
    dataType:'jsonp', 
    success:function(data){ 

      // You needed to dig deeper to get the location 
     var searchterm=data.memes[0].dimensions.location[0]; 

     $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+searchterm+"&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; 
       }); 
      }); 
    } 
}); 

편집 : 반환 된 데이터 객체가 많이로

내가 위의 var searchterm = 라인을 변경 원래 코드에서 제안한 것보다 더 복잡합니다.

는 당신이 필요합니다 :

var searchterm=data.memes[0].dimensions.location[0]; 

을 ... 데이터가 첫번째 요청에서 반환 된 때문은 다음과 같습니다

{"memes":[ 
      { "source":"http://www.knallgrau.at/en", 
       "updated":"Tue Jun 08 19:29:51 CEST 2010", 
       "dimensions":{ "topic":["content","knallgrau","overview","agency","nullItem","Deutsch","foundation","Company","management","English"], 
           "content-type":["text/html"], 
           "author":["vi knallgrau"], 
           "person":["dieter rappold","Dieter Rappold"], 
           "title":["Company - vi knallgrau"], 
           "location":["Austria","Vienna"], 
           "language":["english"], 
           "size":["5494"] 
          } 
      } 
     ] 
}​ 
+0

그러나이 경우 "location"("location": [ "Austria", "Vienna"])과 관련된 그림을 볼 수 없습니다. – asilloo

+0

@asilloo - 코드와 실제 예제 링크를 업데이트했습니다. 첫 번째 요청에서 반환 된 데이터는'data [location]'보다 훨씬 복잡합니다. 제 편집 내용을보고 예제를 시도하십시오. – user113716