Google Shopping API - jquery + json

我試圖從Google購物中檢索圖像列表，並將它們顯示在頁面上。我使用Jquery和Json，而不是原子。Google Shopping API - jquery + json

我正在使用下面的代碼，這個代碼已經從一個類似的Flickr例子改編而來。從谷歌

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

</div> 
<script> 
$.getJSON("https://www.googleapis.com/shopping/search/v1/public/products?callback=?", 
    { 
    key: "blocked out for stackoverflow", 
    country: "US", 
    q: "mp3 player", 
    alt: "json" 
    }, 
    function(data) { 

$.each(data.items, function(i, item){ 
    var img = $("<img/>").attr("src", item.images.link); 
    $("<a/>").attr({href: item.images.link, title: "Courtesy of Flicker"}) 
     .append(img).appendTo("#images"); 
}); 
    });</script> 

</body> 
</html>

JSON響應：

{ 
"kind": "shopping#products", 
"etag": "\"OyT1ifyoCQdoaDfBnjJePyCaGZI/CzI9J98veA7dKdf7KRl5ITkHylw\"", 
"id": "tag:google.com,2010:shopping/products", 
"selfLink": "https://www.googleapis.com/shopping/search/v1/public/products?country=US&q=digital+camera&alt=json&startIndex=1&maxResults=25", 
"nextLink": "https://www.googleapis.com/shopping/search/v1/public/products?country=US&q=digital+camera&alt=json&startIndex=26&maxResults=25", 
"totalItems": 822804, 
"startIndex": 1, 
"itemsPerPage": 25, 
"currentItemCount": 25, 
"items": [ 
    { 
    "kind": "shopping#product", 
    "id": "tag:google.com,2010:shopping/products/1172711/16734419455721334073", 
    "selfLink": "https://www.googleapis.com/shopping/search/v1/public/products/1172711/gid/16734419455721334073?alt=json", 
    "product": { 
    "googleId": "16734419455721334073", 
    "author": { 
    "name": "B&H Photo-Video-Audio", 
    "accountId": "1172711" 
    }, 
    "creationTime": "2011-04-23T22:17:32.000Z", 
    "modificationTime": "2011-10-06T02:20:27.000Z", 
    "country": "US", 
    "language": "en", 
    "title": "Canon powershot sx30 is digital camera 4344B001", 
    "description": "Canon's PowerShot SX30 IS Digital Camera raises the bar for optical zoom lenses--way way up. This ladies and gentlemen is a 35x 24-840mm equivalent zoom lens taking you from a true wide-angle to an ultra telephoto suitable for wildlife and sports photography and who knows maybe even pictures of the stars (just kidding about the astronomy pix kids). And it comes with Canon's Optical Image Stabilizer so you'll be able to capture great shots even at super telephoto focal lengths without unseemly camera shake. A Zoom Framing Assist makes it easy to follow a moving subject even using the super telephoto. The lens uses a double-sided aspherical glass-molded lens an ultra-high refraction index lens enhanced negative refractive power and UD glass to correct wide-angle distortion and suppress chromatic aberration. With 14.1MP you'll get high resolution pictures whether you're shooting landscapes pictures of the kids or those 2 blue herons on the other side of the lake. The high resolution 2.7 Vari-Angle display screen makes it easy to frame and playback your photos and video--that's right you also get gorgeous 720p HD video which can be shot using image stabilization and full zoom with stereo sound. There's also Advanced Smart AUTO which recognizes and sets optimal settings for 23 pre-defined shooting situations. Canon's proprietary DIGIC 4 Image Processor delivers faster more accurate noise reduction for better image quality even at high ISO ratings. This little beauty is ready to go out and play. 4344B001 PowerShot SX30 IS Digital Camera Feature Highlights: PowerShot SX30 IS Digital Camera, 35x Zoom Lens (24-840mm Equivalent), Zoom Framing Assist for Telephoto Photos, 14.1MP High Resolution, 2.7\" Wide Vari-angle LCD Display, 720p HD Video With Stereo Sound, Use Stabilization & Zoom for Video, Advanced Smart AUTO for 23 Situations, Optical Image Stabilizer for Sharp Pix, Powerful DIGIC 4 Image Processor, Lithium-ion Rechargeable Batteries", 
    "link": "http://www.bhphotovideo.com/c/product/734782-REG/Canon_4344B001_PowerShot_SX30_IS_Digital.html/BI/1239/kw/CAPSSX30", 
    "brand": "Canon", 
    "condition": "new", 
    "gtin": "00013803127348", 
    "gtins": [ 
    "00013803127348" 
    ], 
    "inventories": [ 
    { 
     "channel": "online", 
     "availability": "inStock", 
     "price": 399.95, 
     "shipping": 0.0, 
     "currency": "USD" 
    } 
    ], 
    "images": [ 
    { 
     "link": "http://www.bhphotovideo.com/images/images345x345/734782.jpg" 
    } 
    ] 
    } 
    },

它的加載，因爲我可以看到它需要大約4秒來處理JSON響應，但它沒有顯示任何畫面。

任何幫助將是偉大的。

感謝，主Snoutimus

來源

2011-10-07 jcrowson

如果你alert（item.images.link）;'它是否正確輸出你期望的URL？你有'

'標籤嗎？ – Luke

嘗試了警報，但未輸出鏈接。我有圖像的div標籤。 – jcrowson

在Chrome中打開控制檯，得到：Uncaught TypeError：無法讀取未定義的屬性「鏈接」 – jcrowson

$.getJSON(
    'https://www.googleapis.com/shopping/search/v1/public/products?callback=?', 
    { 
     key  : 'redacted', 
     country : 'US', 
     q  : 'mp3 player', 
     alt  : 'json' 
    }, 
    function(data) 
    { 
     $.each(data.items, function(i, item) 
     { 
      if (item.product.images.length > 0) // sanity check 
      { 
       var link = item.product.images[0]['link']; // cache value 
       var img = $('<img/>').attr('src', link); 
       $('<a/>') 
        .attr({ 
         href : link, 
         title : 'Courtesy of Flicker' 
        }) 
        .append(img) 
        .appendTo('#images'); 
      } 
     }); 
    } 
);

乾杯！

來源

2011-10-07 16:31:29 vzwick

英雄。這工作。最後我知道這是一個層次結構問題，因爲我檢查了Chrome的網絡選項卡，它是返回一個JSON負載，無法選擇圖像。有沒有教程，或簡單的方法來解決如何在JSON響應中選擇正確的對象？ – jcrowson

嘿，我簡單地使用'console.log（data）'來檢查響應。 – vzwick

Google Shopping API - jquery + json

回答

相關問題