Paste json in a textarea and convert to formatted html with jquery -
the way should work is
- paste json textarea "jsonvalue"
- click "convert"
- formatted html appears in "placeholder"
i trying title , url out of json , instead when click on "convert" button, - uncaught typeerror: cannot read property 'length' of undefined
link jsfiddle
this html , js
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-language" content="he" /> <title>json sample</title> </head> <body> <textarea id="jsonvalue" style="width:100%" rows="1"></textarea> <button id="convert">click here convert!</button> <div id="placeholder"></div> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function () { $("#convert").click(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>'; var data = $('#jsonvalue').val(); $.each(data.items, function (i, items) { output += '<li><a href="' + items.alternate[0].href + '">' + items.title + '</li>'; }); output += '</ol></body></html>'; $('#placeholder').text(output); }); }); </script> </body> </html> this json paste in textarea
{ "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 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 1 of google's hidden gems. it's powerful tool keep track of trends, interesting topics, or new appears on web. if you're not using already, here few creative ways started 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&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&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&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&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&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 walnuts , 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 walnuts , honey\"><img src=\"http://farm9.staticflickr.com/8400/8682467912_efaa762c89.jpg\" width=\"500\" height=\"333\" alt=\"yogurt panna cotta walnuts , honey\"></a></p>\nguys, discovered ultimate weekend brunch treat/decadent dessert still contains whiff of moderation/<a href=\"http://www.flickr.com/photos/smitten/8681658077/in/photostream\">preschooler</a> snack. ingredient list short, , cooking process simple you’ll have recipe memorized time make second time. , make second time, maybe within week. looks pretty, tastes luxurious and… well, of discovered panna cotta 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 slow. example, week started reading <a href=\"http://rads.stackoverflow.com/amzn/click/1594483299">this new book</a> talking in september … 2007. , that’s beginning. gallery wall? skinny jeans? arrested development? quinoa? people, <i>on it</i>. true sluggish form, it’s been full 4 years since friend nicole gushed me wonders of yogurt panna cotta. put on cooking to-do list, blinked, , brings last week when saw on list , thought, “right, wasn’t going make few days ago?”</p>\n<p><a href=\"http://www.flickr.com/photos/smitten/8681355169/\" title=\"yogurt whisked milk or cream\"><img src=\"http://farm9.staticflickr.com/8522/8681355169_9657d4a377.jpg\" width=\"500\" height=\"333\" alt=\"yogurt whisked milk or cream\"></a></p>\n<p><b>... read rest of <a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/\">yogurt panna cotta walnuts , 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 <b>yogurt panna cotta walnuts , honey</b></a> | <a href=\"http://smittenkitchen.com/blog/2013/04/yogurt-panna-cotta-with-walnuts-and-honey/#comments\">220 comments</a> date | see more: <a href=\"http://smittenkitchen.com/blog/category/breakfast/\" title=\"view posts in breakfast\" rel=\"category tag\">breakfast</a>, <a href=\"http://smittenkitchen.com/blog/category/gluten-free/\" title=\"view posts in gluten-free\" rel=\"category tag\">gluten-free</a>, <a href=\"http://smittenkitchen.com/blog/category/photo/\" title=\"view posts in photo\" rel=\"category tag\">photo</a>, <a href=\"http://smittenkitchen.com/blog/category/pudding/\" title=\"view 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" } } ] }
you're trying iterate on data.items null, since data string doesn't have items property. need parse json object first, using json.parse.
another issue right json won't parse, because not valid. haven't escaped quotes in content.content.
after that, you'll need set output .html rather .text, if want change markup , not insert readable code.
this revised fiddle work, if fix json. missing escape character quote ending href attribute of link text "this new book".
Comments
Post a Comment