将Blogger.com JSON数据恢复为html格式?

时间:2014-11-28 11:24:58

标签: javascript json

有点复杂的问题。

我一直在研究如何将数据存入PhoneGap应用程序,以便可以更改应用程序中的信息,而无需在每次更改时通过appstore进行更新。

经过大量的回顾,我发现Blogger.com有一个JSON输出,我认为我可以利用它来将数据拉入应用程序。

PhoneGap页面必须是.html,所以我不能使用.php或.net页面来获取数据。

我告诉我,如果我能获得JSON数据,我可以使用JS从feed中获取数据并使用它......所以......

我已经建立了一个测试博客并使用这个网址我可以获得一个JSON提要:

http://ironheartuk123.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc

这是Feed输出的内容:

// API callback
myFunc({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-5655651846573938667"},"updated":{"$t":"2014-11-28T02:41:47.924-08:00"},"title":{"type":"text","$t":"test"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/ironheartuk123.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5655651846573938667\/posts\/default?alt=json-in-script"},{"rel":"alternate","type":"text/html","href":"http:\/\/ironheartuk123.blogspot.com\/"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Mark Latham"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16519153095270236038"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"http:\/\/img2.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"2"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-5655651846573938667.post-5882120439717312684"},"published":{"$t":"2014-11-28T02:41:00.003-08:00"},"updated":{"$t":"2014-11-28T02:41:47.937-08:00"},"title":{"type":"text","$t":"Test post 2"},"content":{"type":"html","$t":"Test post 2"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/ironheartuk123.blogspot.com\/feeds\/5882120439717312684\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/ironheartuk123.blogspot.com\/2014\/11\/test-post-2.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5655651846573938667\/posts\/default\/5882120439717312684"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5655651846573938667\/posts\/default\/5882120439717312684"},{"rel":"alternate","type":"text/html","href":"http:\/\/ironheartuk123.blogspot.com\/2014\/11\/test-post-2.html","title":"Test post 2"}],"author":[{"name":{"$t":"Mark Latham"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16519153095270236038"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"http:\/\/img2.blogblog.com\/img\/b16-rounded.gif"}}],"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-5655651846573938667.post-8794205203420774123"},"published":{"$t":"2014-11-28T02:41:00.001-08:00"},"updated":{"$t":"2014-11-28T02:41:19.714-08:00"},"title":{"type":"text","$t":"Test Post 1"},"content":{"type":"html","$t":"Test post 1"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/ironheartuk123.blogspot.com\/feeds\/8794205203420774123\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/ironheartuk123.blogspot.com\/2014\/11\/test-post-1.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5655651846573938667\/posts\/default\/8794205203420774123"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/5655651846573938667\/posts\/default\/8794205203420774123"},{"rel":"alternate","type":"text/html","href":"http:\/\/ironheartuk123.blogspot.com\/2014\/11\/test-post-1.html","title":"Test Post 1"}],"author":[{"name":{"$t":"Mark Latham"},"uri":{"$t":"http:\/\/www.blogger.com\/profile\/16519153095270236038"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"http:\/\/img2.blogblog.com\/img\/b16-rounded.gif"}}],"thr$total":{"$t":"0"}}]}});

博客必须发布'Test Post 1'和'Test Post 2' - 我想用JS来结束这样的事情:

<div><!-- Data from test post 1--></div>

<div><!-- Data from test post 2--></div>

我需要一个JS脚本来提取数据并放入div中?可能吗?!?!

1 个答案:

答案 0 :(得分:0)

这是我最终开始工作的JS:

功能帖子(json){

  // Get five recent posts
  for (var i = 0; i < 2; i++)
  {
    var posturl;  
    // Get rel=alternate for truly post url
    for (var j=0; j < json.feed.entry[i].link.length; j++)
    {
      if (json.feed.entry[i].link[j].rel == 'alternate')
      {
        posturl = json.feed.entry[i].link[j].href;
        break;
      }
    }
    // if the Blogger-feed is set to FULL, then the content is in the content-field
    // if the Blogger-feed is set to SHORT, then the content is in the summary-field
    if ("content" in json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].content.$t;}
    else
    if ("summary" in json.feed.entry[i]) {
      var postcontent = json.feed.entry[i].summary.$t;}
    else var postcontent = "";
    // strip off all html-tags
    // reduce postcontent to 200 characters
    if (postcontent.length > 200) postcontent = postcontent.substring(0,200);
    // Get posts title
    document.write("<div class='blogger-post' id='post" + json.feed.entry[i].id.$t.split('post')[1] + "'>" + postcontent + "</div>");    
  }
    }