从JSON编码的datafeed中提取图像URL

时间:2010-11-09 04:11:44

标签: jquery image json feed

我对JSON的经验有限,我正在尝试从数据Feed中提取图像网址 -

这就是我对源的看法 -

<HTML>
<head>

<script type="application/javascript" src="jquery-1.4.3.min.js"></script>

<script type="text/javascript">
$(function()
{

    $.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=b4cac2fb1f1930eb8efce1812b69d5ab_render=json',
    function(data)
    {   

         $('#Item_URL').html(data.value.items[0].description +' URL for item photo.');

    });



})
</script>
</head>
<body>

<div id="Item_URL"></div>


</body>
</html>

当然,Item_URL显示了Feed的整个数据元素,其中包含大量不需要的文本!

以下是JSON数据的片段

{
  "count": 10,
  "value": {
    "title": "Etsy Feed",
    "description": "Pipes Output",
    "link": "http://pipes.yahoo.com/pipes/pipe.info?_id=b4cac2fb1f1930eb8efce1812b69d5ab",
    "pubDate": "Mon, 08 Nov 2010 20:19:22 -0800",
    "generator": "http://pipes.yahoo.com/pipes/",
    "callback": "",
    "items": [
      {
        "link": "http://www.etsy.com/listing/60872596/large-green-seasons-greetings-gift-tags",
        "y:title": "Large Green Seasons Greetings Gift Tags Set of 6",
        "y:id": {
          "value": "http://www.etsy.com/listing/60872596/large-green-seasons-greetings-gift-tags",
          "permalink": "true"
        },
       "guid": "http://www.etsy.com/listing/60872596/large-green-seasons-greetings-gift-tags",
        "title": "Large Green Seasons Greetings Gift Tags Set of 6",
        "pubDate": "Fri, 05 Nov 2010 08:13:21 -0400",
        "description": "<img src=\"http://ny-image3.etsy.com/il_155x125.189695523.jpg\"/><br />$18.00<br />Set of 6 large, green gift tags each measuring 2 5/8 x 5 1/4 inches.<br /><br />",
        "y:published": {
          "hour": "12",
          "timezone": "UTC",
          "second": "21",
          "month": "11",
          "minute": "13",
          "utime": "1288959201",
          "day": "5",
          "day_of_week": "5",
          "year": "2010"
        }
     },

所需的URL位于description元素下,并且是

img src =“http://ny-image3.etsy.com/il_155x125.189695523.jpg”

Feed中的此项目。

仅显示图像的最有效方法是什么?

谢谢!

1 个答案:

答案 0 :(得分:0)

以某种方式从图像中获取URL(不能说因为我不知道如何格式化json)

var imgurl = data.value.pic.url; //or whatever

然后在html某处有一个容器

<div class="imageContainer">
</div>

然后使用一些jquery将图像附加到容器div

<script>
    $('div.imageContainer').append('<img src="' + imgurl + '"/>');
</script>

编辑:

我现在看到了这个问题,data.value.item [0] .description包含一个图片标签以及不需要的信息(正如你刚才提到的那样)。这实际上有点棘手。你想要做的是将描述中的值包装在一个范围内,然后在其上运行一个选择器来提取图像:

<script>
    var crappyData = data.value.item[0].description;
    var lessCrappy = '<span>' + crappyData + '</span>';
    //Now create a jQuery object out of it
    var notCrappy = $(lessCrappy);
    //Now run a selector on the jQuery object to get all images in description
    var jqueryImage = notCrappy.find('img');
    //Now we can append it to the div mentioned earlier
    $('div.imageContainer').append(jqueryImage);
</script>

唯一棘手的问题是你必须在某些东西中包含描述,否则jquery将无法理解它,因为它不是格式良好的HTML。

希望这有帮助!