Extract image URLS from JSON encoded datafeed

I have limited experience with JSON, and am trying to extract image URLs from a data feed -

This is what I have for a source -

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

Of course, Item_URL shows the whole data element for the feed, which includes a ton of text that is not needed!

Here is a fragment of the JSON data

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

The desired URL is under the description element, and is

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

for this item in the feed.

What would be the most efficient way to display only the image?

Thanks!

Solution

Get the URL out of the image somehow (cannot say how because I don't know how the json is formatted)

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

Then in the html somewhere have a container

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

Then use some jquery to append the image to the container div

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

EDIT:

I see the problem now, the data.value.item[0].description contains an image tag as well as un-needed information (as you mentioned at first). This is actually a little tricky. What you want to do is wrap the value in description in a span or something then run a selector on it to extract the image:

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

The only tricky thing is that you have to wrap description in something, or jquery will not be able to make sense of it because it is not well-formed html.

Hope this helps!