Parsing JSON data from textarea with Javascript

问题

I am trying to be able to drop JSON formatted data into a textarea to be able to pull out one piece of data at a time. Currently I am just trying to get the names output to a DIV. This is a static HTML file with one textarea, one button and 1 DIV. I am not getting any output which I do not understand. Any assistance would be greatly appreciated.

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 Data

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

回答1:

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>

Changes:

document.getElementById() gets an element, you need its value
"information" is a string, information is the variable you want to parse
" is present +"<br />" was not a correct string
The "requesting..." string overwrote the result, it is commented now
Your JSON is not a JSON, it needs surrounding []-s to become a list

回答2:

There are a few issues in your code, the main one being your parsing of information

You're passing the literal string "information" instead of the value of the text box

The other issues are with your string concatenation as pointed out by Nick Parsons, and with the line results.innerHTML = "requesting..."; as this will just override what your for loop has set

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 you will have to wrap your dataset in [] to denote it's an array

来源：https://stackoverflow.com/questions/51305901/parsing-json-data-from-textarea-with-javascript

标签

javascript

html

json