Извлечение URL-адресов изображений из потока данных в кодировке JSON - PullRequest
Новая
       30

Извлечение URL-адресов изображений из потока данных в кодировке JSON

2 голосов
/ 09 ноября 2010

У меня ограниченный опыт работы с JSON, и я пытаюсь извлечь URL изображений из канала данных -

Это то, что у меня есть для источника - 

<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показывает весь элемент данных для канала, который включает в себя тонну текста, который не нужен!

Вот фрагмент данных 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-адрес находится под описаниеми является

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

для этого элемента в ленте.

Чтобудет самый эффективный способ отображения только изображения?

Спасибо!

1 Ответ

0 голосов
/ 09 ноября 2010

Как-то получить 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.

Надеюсь, это поможет!

...