首页 > 解决方案 > 使用 Javascript 从 textarea 解析 JSON 数据

问题描述

我试图能够将 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" }

标签: javascripthtmljson

解决方案


您的代码中有一些问题,主要是您对信息的解析

您正在传递文字字符串"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>

PS你将不得不将你的数据集包装起来[]以表示它是一个数组


推荐阅读