2010-06-06 31 views
2

我的問題是管理獲取標籤並用作變量的代碼(var searchterm = ??????)。有了JSON,我希望首先獲得標籤的「位置」標籤,並顯示來自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 2010-06-06 22:19:36

回答

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]; 

...因爲數據從第1請求返回的是這樣的:

{"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

但在這種情況下,我們無法看到與「位置」(「位置」:[「Austria」,「Vienna」)相關的圖片) – asilloo 2010-06-08 17:22:50

+0

@asilloo - 我更新了代碼和實例鏈接。從第一個請求返回的數據比'data [location]'複雜得多。請參閱我的編輯,並嘗試該示例。 – user113716 2010-06-08 17:40:13