Parsing JSON data from textarea with Javascript

Question

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

You're passing the string information not the value of the textbox — George
– George, Commented Jul 12, 2018 at 12:41
Syntax error with this line: data[obj].user+" is present +"<br />"; Should be data[obj].user+" is present" +"<br />"; or you could simplify it to be data[obj].user+" is present<br />"; — Nick Parsons
– Nick Parsons, Commented Jul 12, 2018 at 12:42

George · Accepted Answer · 2018-07-12 12:44:25Z

3

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

answered Jul 12, 2018 at 12:44

George

6,7592 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tevemadar · Accepted Answer · 2018-07-12 12:48:18Z

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

Collectives™ on Stack Overflow

Parsing JSON data from textarea with Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related