2013-05-16 83 views
0

我無法解析從我的谷歌閱讀器出口starred.json文件,使之轉化爲進口的HTML文件到使用jQuery每個我沒貼getpocket使用jQuery的每一個解析谷歌閱讀器starred.json

starred.json這裏的內容,因爲它太大

的問題是陣列的結構和對象

我想獲得的URL,標題和摘要

var data = { 
    "id" : "user/17115776656148603551/state/com.google/starred", 
    "title" : "Dasa סימן פריטים בכוכב ב-Google Reader", 
    "author" : "Dasa", 
    "updated" : 1368699933, 
    "direction" : "ltr", 
    "items" : [ { 
    "crawlTimeMsec" : "1368699933957", 
    "timestampUsec" : "1368699933957939", 
    "id" : "tag:google.com,2005:reader/item/eb307953496c3755", 
    "categories" : [ "user/17115776656148603551/state/com.google/starred", "user/17115776656148603551/state/com.google/fresh", "search", "job search", "news stories", "trending", "job hunting", "news", "vanity searches", "productivity", "search query", "google alerts", "alerts", "organization", "local news", "google", "time savers", "trending news", "shortcuts", "notifications" ], 
    "title" : "Five Creative Uses for Google Alerts", 
    "published" : 1366282800, 
    "updated" : 1366282800, 
    "canonical" : [ { 
     "href" : "http://lifehacker.com/five-creative-uses-for-google-alerts-475278626" 
    } ], 
    "alternate" : [ { 
     "href" : "http://feeds.gawker.com/~r/lifehacker/full/~3/jaLbxODg6SM/five-creative-uses-for-google-alerts-475278626", 
     "type" : "text/html" 
    } ], 
    "summary" : { 
     "direction" : "ltr", 
     "content" : "<p><img height=\"360\" width=\"640\" src=\"http://img.gawkerassets.com/img/18kye9icys64djpg/ku-xlarge.jpg\"></p><p>Google Alerts is one of Google's hidden gems. It's a really powerful tool to keep track of trends, interesting topics, or anything really new that appears on the web. If you're not using it already, here are a few creative ways to get started with it.</p><p><a href=\"http://lifehacker.com/five-creative-uses-for-google-alerts-475278626\">Read more...</a></p><img width=\"1\" height=\"1\" src=\"http://lifehacker.feedsportal.com/c/34977/f/647165/s/2add7ec3/mf.gif\" border=\"0\"><div><table border=\"0\"><tr><td valign=\"middle\"><a href=\"http://share.feedsportal.com/share/twitter/?u=http%3A%2F%2Flifehacker.com%2Ffive-creative-uses-for-google-alerts-475278626&amp;t=Five+Creative+Uses+for+Google+Alerts\"><img src=\"http://res3.feedsportal.com/social/twitter.png\" border=\"0\"></a> <a href=\"http://share.feedsportal.com/share/facebook/?u=http%3A%2F%2Flifehacker.com%2Ffive-creative-uses-for-google-alerts-475278626&amp;t=Five+Creative+Uses+for+Google+Alerts\"><img src=\"http://res3.feedsportal.com/social/facebook.png\" border=\"0\"></a> <a href=\"http://share.feedsportal.com/share/linkedin/?u=http%3A%2F%2Flifehacker.com%2Ffive-creative-uses-for-google-alerts-475278626&amp;t=Five+Creative+Uses+for+Google+Alerts\"><img src=\"http://res3.feedsportal.com/social/linkedin.png\" border=\"0\"></a> <a href=\"http://share.feedsportal.com/share/gplus/?u=http%3A%2F%2Flifehacker.com%2Ffive-creative-uses-for-google-alerts-475278626&amp;t=Five+Creative+Uses+for+Google+Alerts\"><img src=\"http://res3.feedsportal.com/social/googleplus.png\" border=\"0\"></a> <a href=\"http://share.feedsportal.com/share/email/?u=http%3A%2F%2Flifehacker.com%2Ffive-creative-uses-for-google-alerts-475278626&amp;t=Five+Creative+Uses+for+Google+Alerts\"><img src=\"http://res3.feedsportal.com/social/email.png\" border=\"0\"></a></td></tr></table></div><br><br><a href=\"http://da.feedsportal.com/r/163644809562/u/49/f/647165/c/34977/s/2add7ec3/kg/342/a2.htm\"><img src=\"http://da.feedsportal.com/r/163644809562/u/49/f/647165/c/34977/s/2add7ec3/kg/342/a2.img\" border=\"0\"></a><img width=\"1\" height=\"1\" src=\"http://pi.feedsportal.com/r/163644809562/u/49/f/647165/c/34977/s/2add7ec3/kg/342/a2t.img\" border=\"0\"><img src=\"http://feeds.feedburner.com/~r/lifehacker/full/~4/jaLbxODg6SM\" height=\"1\" width=\"1\">" 
    }, 
    "author" : "Alan Henry", 
    "comments" : [ ], 
    "annotations" : [ ], 
    "origin" : { 
     "streamId" : "feed/http://lifehacker.com/index.xml", 
     "title" : "Lifehacker", 
     "htmlUrl" : "http://lifehacker.com" 
    } 
    }, { 
    "crawlTimeMsec" : "1368699816215", 
    "timestampUsec" : "1368699816215241", 
    "id" : "tag:google.com,2005:reader/item/84c25c636b707078", 
    "categories" : [ "user/17115776656148603551/state/com.google/read", "user/17115776656148603551/state/com.google/starred", "user/17115776656148603551/state/com.google/fresh", "Breakfast", "Gluten-Free", "Photo", "Pudding" ], 
    "title" : "yogurt panna cotta with walnuts and honey", 
    "published" : 1366988860, 
    "updated" : 1366988860, 
    "canonical" : [ { 
     "href" : "http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/" 
    } ], 
    "alternate" : [ { 
     "href" : "http://feedproxy.google.com/~r/smittenkitchen/~3/t_w8asbkyNg/", 
     "type" : "text/html" 
    } ], 
    "content" : { 
     "direction" : "ltr", 
     "content" : "<p><a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/\" title=\"yogurt panna cotta with walnuts and honey\"><img src=\"http://farm9.staticflickr.com/8400/8682467912_efaa762c89.jpg\" width=\"500\" height=\"333\" alt=\"yogurt panna cotta with walnuts and honey\"></a></p>\nGuys, I just discovered the ultimate weekend brunch treat/decadent dessert that still contains a whiff of moderation/<a href=\"http://www.flickr.com/photos/smitten/8681658077/in/photostream\">preschooler</a> snack. The ingredient list is so short, and the cooking process is so simple that you’ll have the recipe memorized by the time you make it the second time. And you will make it a second time, maybe even within a week. It looks pretty, tastes luxurious and… well, most of you probably discovered panna cotta a decade ago.\n<p><a href=\"http://www.flickr.com/photos/smitten/8682466230/\" title=\"lemon, gelatin, sugar, milk/cream, yogurt\"><img src=\"http://farm9.staticflickr.com/8395/8682466230_9e19d63848.jpg\" width=\"500\" height=\"333\" alt=\"lemon, gelatin, sugar, milk/cream, yogurt\"></a><br>\n<a href=\"http://www.flickr.com/photos/smitten/8682466352/\" title=\"thick greek yogurt\"><img src=\"http://farm9.staticflickr.com/8262/8682466352_5a3120eb08.jpg\" width=\"500\" height=\"333\" alt=\"thick greek yogurt\"></a></p>\n<p>I’m sorry, I’m just slow. For example, this week I started reading <a href=\"http://rads.stackoverflow.com/amzn/click/1594483299">this new book</a> that everyone was talking about in September … 2007. And that’s just the beginning. Gallery wall? Skinny jeans? Arrested Development? Quinoa? People, I am <i>on it</i>. True to sluggish form, it’s been a full four years since my friend Nicole gushed to me about the wonders of yogurt panna cotta. I put it on my cooking to-do list, blinked, and that about brings us up to last week when I saw it on my list and thought, 「right, wasn’t I going to make that a few days ago?」</p>\n<p><a href=\"http://www.flickr.com/photos/smitten/8681355169/\" title=\"yogurt whisked with milk or cream\"><img src=\"http://farm9.staticflickr.com/8522/8681355169_9657d4a377.jpg\" width=\"500\" height=\"333\" alt=\"yogurt whisked with milk or cream\"></a></p>\n<p><b>... Read the rest of <a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/\">yogurt panna cotta with walnuts and honey</a> on <a href=\"http://smittenkitchen.com\">smittenkitchen.com</a></b></p>\n<hr>\n<p><small>© smitten kitchen 2006-2012. |\n<a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/\">permalink to <b>yogurt panna cotta with walnuts and honey</b></a> | <a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/#comments\">220 comments</a> to date | see more: <a href=\"http://smittenkitchen.com/blog/category/breakfast/\" title=\"View all posts in Breakfast\" rel=\"category tag\">Breakfast</a>, <a href=\"http://smittenkitchen.com/blog/category/gluten-free/\" title=\"View all posts in Gluten-Free\" rel=\"category tag\">Gluten-Free</a>, <a href=\"http://smittenkitchen.com/blog/category/photo/\" title=\"View all posts in Photo\" rel=\"category tag\">Photo</a>, <a href=\"http://smittenkitchen.com/blog/category/pudding/\" title=\"View all posts in Pudding\" rel=\"category tag\">Pudding</a>\n</small></p>" 
    }, 
    "author" : "deb", 
    "comments" : [ ], 
    "annotations" : [ ], 
    "origin" : { 
     "streamId" : "feed/http://feeds.feedburner.com/smittenkitchen", 
     "title" : "smitten kitchen", 
     "htmlUrl" : "http://smittenkitchen.com" 
    } 
    } ] 
} 


    $(document).ready(function() { 


      var output='<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Instapaper: Export</title></head><body><h1>Unread</h1><ol></ol><h1>Archive</h1><ol>'; 

       $.each(data.items, function(i, data){ 
       output+='<li><a href="'+ data['title'] + '">'+ data['title'] + data['canonical'].href + '</li>:'; 
       }); 

      output+='</ol></body></html>'; 
      document.getElementById("placeholder").innerHTML=output; 
    }); 

     </script> 
+1

我們將需要'STARRED> JSON CONTENT GOES HERE'的樣子,否則我們無法幫到您.. – TryingToImprove

+0

@TryingToImprove添加starred.json的內容 – Dasa

+0

那麼,對於初學者來說,那長長的「內容」領域。它是'click/1594483299>>這本新書'的地方,它應該是'click/1594483299 \>>這本新書「。我不知道這是否是問題。 – Aioros

回答

2

您可以訪問你需要的屬性:

var title = data.title, 
    url = data.canonical[0].href, 
    summary = data.summary.content; 

或者您可以使用的「這個」,而不是「數據」,這可以使代碼更容易理解因爲「數據」被另作使用。

+1

這可能是正確的解決方案,我只是認爲你應該'數據',這只是爲了清楚,因爲這是問題中使用的名稱。 – Aioros

+0

@Aioros - 同意。我已經編輯了相應的答案 –

+0

@RobJ我得到未捕獲的SyntaxError:意外的令牌o – Dasa