将 json 粘贴到 textarea 并使用 jquery 转换为格式化的 html答案

【问题标题】：Paste json in a textarea and convert to formatted html with jquery将 json 粘贴到 textarea 并使用 jquery 转换为格式化的 html
【发布时间】：2013-05-21 05:57:45
【问题描述】：

它应该工作的方式是

将 json 粘贴到 textarea “jsonvalue”中
点击“转换”
格式化的 html 出现在“占位符”中

我试图从 json 中获取标题和 url，但是当我点击“转换”按钮时，我得到 - Uncaught TypeError: Cannot read property 'length' of undefined p>

链接到jsFiddle

这是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 to 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>

这是我在textarea中粘贴的json

{
  "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"
    }
  } ]
}

【问题讨论】：

标签： jquery json textarea

【解决方案1】：

您正在尝试迭代 data.items 这将为 null，因为 data 是一个没有 items 属性的字符串。您需要先使用 JSON.parse 解析您的 JSON 对象。

另一个问题是现在您的 JSON 无法解析，因为它无效。您没有正确转义 content.content 中的所有引号。

之后，如果您想更改标记而不插入可读代码，则需要将输出设置为 .html 而不是 .text。

This revised fiddle 将工作，如果你修复你的 JSON。您缺少以文本“this new book”链接的 href 属性结尾的引号的转义字符。

【讨论】：

@Dasa：我在回答中提到了这个问题。你的 JSON 坏了，我告诉你如何修复它。

【解决方案2】：

试试这样的

    $(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();
            data = jQuery.parseJSON(data);

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

            output += '</ol></body></html>';
            $('#placeholder').text(output);
        });

    });

【讨论】：