文章/答案/技术大牛

发布

社区首页 >问答首页 >Google Shopping API - Jquery + Json

问Google Shopping API - Jquery + Json
EN

Stack Overflow用户

提问于 2011-10-07 23:03:23

回答 1查看 2.5K关注 0票数 1

我正在尝试从Google Shopping检索图像列表，并将它们显示在页面上。我使用的是Jquery和Json，而不是atom。

我使用的代码是从一个类似的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>

来自Google的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响应，但它没有显示任何图片。

任何帮助都是最好的。

谢谢，斯努蒂莫斯大人

jquery

json

api

google-shopping-api

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-10-08 00:31:30

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

干杯!

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7689110

复制

相似问题

问Google Shopping API - Jquery + Json
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google Shopping API - Jquery + JsonEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Google Shopping API - Jquery + Json
EN