Flickr json feed with jquery

Я попытался передать поток Flickr при создании SPA (одностраничное приложение). Это работает очень хорошо. У меня просто проблемы, связанные с моими элементами. Я имею в виду, с генерируемым кодом, вместо адресности изображения в окружении «р», я получаю:Flickr json feed with jquery

<p></p> 
<img src="http://farm1.staticflickr.com/702/22578264723_5baef149b4_m.jpg"> 
<p></p>

И вот мой код:

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>JSON Flickr with JQuery</title> 
    <style> 
    img { 
     height: 100px; 
     float: left; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 

<body> 


    <div id="images"></div> 



    <script> 
    //$("<table><tbody>").appendTo('#images'); 
    (function() { 
     var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
     //var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?format=json"; 

     $.getJSON(flickerAPI, { 

      tagmode: "any", 
      format: "json" 
     }) 
     .done(function(data) { 


      $.each(data.items, function(i, item) { 

       $("<p>").appendTo('#images'); 
       $("<img>").attr("src", item.media.m).appendTo('#images'); 
       $("</p><p><a href=\"" + item.link + "\">" + item.title + "</a></p>").appendTo('#images'); 
       $("<p>by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></p>").appendTo('#images'); 
       $("<p>Tags : " + item.tags + "</p>").appendTo('#images'); 
       $("<hr>").appendTo('#images'); 

       } 

      ); 
      } 

     ); 
    })(); 
    //$("</tbody></table>").appendTo('#images'); 
    </script> 

</body> 

</html>

Бы идею с «р» или "tr" & "td"? Я думаю, что проблема заключается в том, как я использую метод appendTo().

благодаря

источник

2015-11-22 b.m

Поскольку вы присоединените открытый элемент, браузер закрывает его для вас, так что DOM остается в силе. Вам нужно сохранить его как переменную, а затем добавить переменную, как только все будет добавлено.

$.each(data.items, function(i, item) { 
    var $append; 
    $append += "<p>"; 
    $append += "<img src=\"" + item.media.m + "\"/>"; 
    $append += "</p><p><a href=\"" + item.link + "\">" + item.title + "</a></p>"; 
    $append += "<p>by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></p>"; 
    $append += "<p>Tags : " + item.tags + "</p>"; 
    $append += "<hr>"; 
    $('#images').append($append); 
});

JSFIDDLE

источник

2015-11-22 12:01:19 cameronjonesweb

Спасибо вам ответить, что работает лучше. Я просто получил «unifined», поэтому мне пришлось инициализировать 'var $ append =" "; –

Спасибо за ответ, который работал очень хорошо, я просто должен был инициализировать var $append="";, так как я получаю «undifined» в верхней части каждого изображения. Я также заменил Ps на TR и TD. Вот окончательный код:

<head> 
    <meta charset="utf-8"> 
    <title>JSON Flickr with JQuery</title> 
    <style> 
    img { 
     height: 100px; 
     float: left; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 

<body> 


    <div id="images"></div> 



    <script> 

    (function() { 
     var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 

     $.getJSON(flickerAPI, { 

      tagmode: "any", 
      format: "json" 
     }) 
     .done(function(data) { 


      $.each(data.items, function(i, item) { 
       var $append=""; 
       $append += "<tr><td>"; 
       $append += "<img src=\"" + item.media.m + "\"/>"; 
       $append += "</td></tr><tr><td><a href=\"" + item.link + "\">" + item.title + "</a> "; 
       $append += " by <a href=\"" + "https://www.flickr.com/people/" + item.author_id + "\">" + item.author + "</a></td></tr>"; 
       $append += "<tr><td>Tags : " + item.tags + "</td></tr>"; 
       $append += "<tr><td><hr></hr></td></tr>"; 
       $('#images').append($append); 

       } 

      ); 
      } 

     ); 
    })(); 

    </script> 

</body> 

</html>

источник

2015-11-23 15:00:25

Flickr json feed with jquery

ответ

Смежные вопросы