使用 Javascript 从 textarea 解析 JSON 数据答案

【问题标题】：Parsing JSON data from textarea with Javascript使用 Javascript 从 textarea 解析 JSON 数据
【发布时间】：2018-07-12 12:38:16
【问题描述】：

我试图能够将 JSON 格式的数据放入 textarea 中，以便能够一次提取一条数据。目前我只是想将名称输出到 DIV。这是一个静态 HTML 文件，包含一个文本区域、一个按钮和 1 个 DIV。我没有得到任何我不明白的输出。任何帮助将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
<script>
function parser(){
    var results = document.getElementById("results");
    var information = document.getElementById("TTP");
            var data = JSON.parse("information");
            results.innerHTML = "";
            for(var obj in data){
                results.innerHTML += data[obj].user+" is present +"<br />";
            }
    results.innerHTML = "requesting...";
}
</script>
</head>
<body>
<textarea id="TTP"></textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>
</body>
</html>

JSON 数据

{ "user":"John", "age":22, "country":"United States" },
{ "user":"Will", "age":27, "country":"United Kingdom" },
{ "user":"Abiel", "age":19, "country":"Mexico" }, 
{ "user":"Rick", "age":34, "country":"Panama" },
{ "user":"Susan", "age":23, "country":"Germany" },
{ "user":"Amy", "age":43, "country":"France" },
{ "user":"Pete", "age":18, "country":"Italy" },
{ "user":"Chris", "age":25, "country":"United States" },
{ "user":"Louis", "age":31, "country":"Spain" },
{ "user":"Emily", "age":38, "country":"Uraguay" },
{ "user":"Shawn", "age":52, "country":"Chile" },
{ "user":"Greg", "age":24, "country":"Romania" }

【问题讨论】：

JSON.parse("information"); => 未捕获的语法错误
您传递的字符串 information 不是文本框的值
这一行的语法错误：data[obj].user+" is present +"<br />"; 应该是 data[obj].user+" is present" +"<br />"; 或者您可以将其简化为 data[obj].user+" is present<br />";

标签： javascript html json

【解决方案1】：

您的代码中存在一些问题，主要是您对信息的解析

您传递的是文字字符串 "information" 而不是文本框的值

其他问题是 Nick Parsons 指出的字符串连接，以及 results.innerHTML = "requesting..."; 行，因为这只会覆盖你的 for 循环设置

function parser() {
  var results = document.getElementById("results");
  var information = document.getElementById("TTP");
  var data = JSON.parse(information.value);
  results.innerHTML = "";
  for (var obj in data) {
    results.innerHTML += data[obj].user + " is present <br/> ";
  }
}

<textarea id="TTP"></textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>

P.S 您必须将数据集包装在 [] 中以表示它是一个数组

【讨论】：

【解决方案2】：

function parser(){
    var results = document.getElementById("results");
    var information = document.getElementById("TTP").value;             // <-- 1
            var data = JSON.parse(information);                         // <-- 2
            results.innerHTML = "";
            for(var obj in data){
                results.innerHTML += data[obj].user+" is present <br>"; // <-- 3
            }
    //results.innerHTML = "requesting...";                              // <-- 4
}

<textarea id="TTP">[{ "user":"John", "age":22, "country":"United States" },
{ "user":"Will", "age":27, "country":"United Kingdom" },
{ "user":"Abiel", "age":19, "country":"Mexico" }, 
{ "user":"Rick", "age":34, "country":"Panama" },
{ "user":"Susan", "age":23, "country":"Germany" },
{ "user":"Amy", "age":43, "country":"France" },
{ "user":"Pete", "age":18, "country":"Italy" },
{ "user":"Chris", "age":25, "country":"United States" },
{ "user":"Louis", "age":31, "country":"Spain" },
{ "user":"Emily", "age":38, "country":"Uraguay" },
{ "user":"Shawn", "age":52, "country":"Chile" },
{ "user":"Greg", "age":24, "country":"Romania" }]</textarea>
<div id="results"></div>
<input type="button" onClick="parser()" value="Run"></input>

变化：

document.getElementById() 得到一个元素，你需要它的 value
"information" 是字符串，information 是你要解析的变量
" is present +"<br />" 不是正确的字符串
“requesting...”字符串覆盖了结果，现在被注释掉了
你的 JSON 不是 JSON，它需要包围 []-s 才能成为一个列表

【讨论】：