javascript - Parse JSON Data into HTML -
i'm using google feeds api display latest posts facebook.
the statues coming xml file fbrss.com , code have below works:
<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>
the response console, expected
postcontent : example post, 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 launch our new website! stay tuned more updates , more info. we're excited. link : https://www.facebook.com/linktopost date: fri, 04 apr 2014 23:06:59 -0700
now i've tried appending jsondata div so, don't think doing correctly.
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>"); } });
i assigned global variable use outside of that. i'm not getting inside #facebookrss div.
i'm trying have date , postcontent seperate divs, postcontent being wrapped in link can visit facebook page.
i trying parse date "mm - dd". google feeds api doesn't seem fleshed out, i'm new javascript.
thanks can whatsoever.
edit: have solved it, thank cackharot. below final code fitting formatting , includes better formatted date.
$.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 have 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 rss div }); } } });
try this
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 have 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 rss div }); }
Comments
Post a Comment