从 Textarea 获取 JSON 代码并解析答案

【问题标题】：Get JSON code from Textarea and parse it从 Textarea 获取 JSON 代码并解析
【发布时间】：2015-11-14 06:52:31
【问题描述】：

我在 textarea 中有一个 JSON 代码，我想获取它并使用它，因为它存在于我的网站中。

这是文本区域代码：

<textarea>
  var settings = [
        {
            "id" : "post_thumbnail",
            "name" : "Default Post Thumbnail",
            "desc" : "The image src that you want to use for non-thumbnail posts.", 
            "type" : "text",
            "std" : "http://lorempixel.com/640/300/"
        }
    ]
</textarea>

我试过这个，但不幸的是它只有在代码存在于网站而不是 textarea 时才有效，因为我收到了这个错误：

未捕获的引用错误：未定义设置

for( var i = 0; i < settings.length; i++){

        var setting_id = settings[i].id,
            setting_name = settings[i].name,
            setting_desc = settings[i].desc,
            setting_type = settings[i].type,
            setting_std = settings[i].std;
$('body').html(setting_id +'<br>'+ setting_name +'<br>'+ setting_desc +'<br>'+ setting_type +'<br>'+  setting_std);
}

这是一个现场演示：http://jsfiddle.net/tauv0or1/

【问题讨论】：

那不是 JSON，它是 JavaScript。诚然，如果您删除 = 以及它之前的所有内容，剩下的就是 JSON。
@Quentin 感谢您的回复。对不起，我是个大人物，我认为我们称之为 JSON。那么我该怎么做才能得到我想要的呢？

标签： javascript jquery html json

【解决方案1】：

textarea 的值不会被解析为 JavaScript。相反，将值更改为有效的 JSON：

<textarea>
    [
        {
            "id" : "post_thumbnail",
            "name" : "Default Post Thumbnail",
            "desc" : "The image src that you want to use for non-thumbnail posts.", 
            "type" : "text",
            "std" : "http://lorempixel.com/640/300/"
        }
    ]
</textarea>

并调整您的 JavaScript 以在值上使用 JSON.parse：

var field = document.getElementById("the_textarea");
var settings = JSON.parse(field.value);

由于用户可以在文本区域中输入任意信息，您可能希望将 JSON.parse 包装在 try-catch 块中，并提醒用户注意语法错误：

var settings = null;

try {
    settings = JSON.parse(field.value);
}
catch (error) {
    if (error instanceof SyntaxError) {
        alert("There was a syntax error. Please correct it and try again: " + error.message);
    }
    else {
        throw error;
    }
}

【讨论】：

非常感谢您的帮助，问题已解决。

【解决方案2】：

您需要先评估文本才能真正将其作为 javascript 运行：

eval($('textarea').text());

http://jsfiddle.net/tauv0or1/1/

或者，您可以将其解析为 JSON，但您需要先编辑 textarea 的内容：

var settings = JSON.parse($('textarea').text());

http://jsfiddle.net/tauv0or1/2/

【讨论】：

很可能是因为您使用的是eval
能否请一位反对者解释一下？ eval() 既可怕又糟糕，但它实际上是评估textarea 内容原样的唯一方法。
@GregBurghardt eval 是不好的做法，但如果它是可行的解决方案，它不应该是自动投反对票。
@JamesBrierley：我同意eval 并非普遍糟糕（顺便说一句，我不是反对者）。您只是试图解决 OP 的原始问题，即他们希望按原样解析 textarea 值而不更改其 JavaScript 代码——在这种情况下 eval 会起作用，尽管这是不好的做法。