javascript - 将 JSON 数据解析为 HTML

Question

我正在使用 Google Feeds API 来显示我的 Facebook 上的最新帖子。

这些雕像来自 fbrss.com 的 XML 文件，下面的代码成功运行:

    <script type="text/javascript">
    google.load("feeds", "1")

    $.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                ;
            }
        }
    });
</script>

我从控制台得到的响应，正如预期的那样

    postContent     : Example post, just testing our facebook news right now!
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:54:02
------------------------
postContent     : We're getting ready to launch our new website! Stay tuned for more updates and more info. We're very excited.
link    : https://www.facebook.com/LINKTOPOST
date:      Fri, 04 Apr 2014 23:06:59 -0700

现在我尝试将 jsonData 附加到像这样的 div 中，但我认为我做得不正确。

 if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);

                });
                                }

            $("#facebookrss").append("<div>Test" + NewsPost +"</div>");

        }
    });

我分配了一个全局变量，这样我就可以在该变量之外使用它。但我的 #facebookrss div 中没有任何内容。

我试图将日期和帖子内容放入单独的 div 中，并将帖子内容包含在链接中，以便他们可以访问 Facebook 页面。

我还尝试将日期解析为“MM - DD”。 Google Feeds API 似乎不太完善，但我对 javascript 也很陌生。

非常感谢任何可以提供帮助的人。

编辑:已成功解决，谢谢 CACKHAROT。下面是我的最终代码，适合格式化，包括更好的格式化日期。

$.ajax({
        url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=3&callback=?&q=' + encodeURIComponent('feedhere.xml'),
        dataType : 'json',
        success  : function (data) {
            if (data.responseData.feed && data.responseData.feed.entries) {
                $.each(data.responseData.feed.entries, function (i, e) {
                    window.NewsPost = e.title;
                    console.log("------------------------");
                    console.log("postContent     : " + e.title);
                    console.log("link    : " + e.link);
                    console.log("date:      " + e.publishedDate);
                    // construct div tag to have the new post details

                    var date = new Date(e.publishedDate);
                    monthNames =
                        [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
                    datemonth = monthNames[ date.getMonth() ];
                    dateday = date.getDay();

                    var construct_news = '<div class="facebook-feed">';
                    construct_news += '<div class="left">';
                    construct_news += '<div class="footer-circle-large">';
                    construct_news +='<div class="month">' + datemonth + '</div>';
                    construct_news += '<div class="day">' + dateday + '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '<div class="right">';

                    construct_news += '<div>';
                    construct_news += '<span class="facebook-update"><a target="_blank" href="'+ e.link+'">' + e.title + '</a></span>';

                    construct_news += '</div>';
                    construct_news += '</div>';
                    construct_news += '</div>';

                    $("#facebookrss").append(construct_news); // append it to rss div

                });
            }
        }
    });

Answer 1

试试这个

if (data.responseData.feed && data.responseData.feed.entries) {
    $.each(data.responseData.feed.entries, function (i, e) {
        window.NewsPost = e.title;
        console.log("------------------------");
        console.log("postContent     : " + e.title);
        console.log("link    : " + e.link);
        console.log("date:      " + e.publishedDate);
        // construct div tag to have the new post details

        var new_post_tag = '<div>';
        new_post_tag += '<h4>' + e.title + '</h4>';
        new_post_tag += '<p>' + e.link + '</p>';
        new_post_tag += '<p>' + e.publishedDate + '</p>';
        new_post_tag += '</div>';

        $("#facebookrss").append(new_post_tag); // append it to rss div
    });
}