[英]Parse JSON Data into HTML
我正在使用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中没有任何内容。
我正在尝试将日期和postcontent放入单独的div中,并且将postcontent包裹在链接中,以便他们可以访问Facebook页面。
我也试图将日期解析为“ MM-DD”。 Google Feeds API看起来并不完善,但是我对javascript也很陌生。
非常感谢任何可以提供帮助的人。
编辑:已成功解决它,谢谢您。 以下是我的最终代码,适用于格式化,包括更好的格式化日期。
$.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
});
}
}
});
尝试这个
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
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.