Reading JSON elements from a field value using REACT - reactjs

Question

I'm using REACT to read the value from an input field containing a JSON object.
I'm able to get the JSON string value into a const containing the following:
{"name": "This is the name element"}
But when I try to extract the value of the "name" element from the JSON, I get an "undefined" response.
When I get the same JSON text from a js file like this:
export default
{"name": "This is the name field"}
and import it using:
import JSONObject from './JSONObjectFile'
Then it works fine.
What do I need to do to achieve the same thing when retrieving the JSON object from the text field on the HTML page?
Here's the whole code:
import './App.css';
import JSONObject from './aa_DDFFormConfigJSON'
function App() {
var myJSON;
function ConfigJSONReady(event) {
myJSON = document.getElementsByName("myJSONField")[0].value;
//This returns "undefined" instead of the actual "name" element value
console.log("myJSON.name using input field: " + myJSON.name);
// This is the same JSON object from a file, but it works fine
myJSON = JSONObject;
console.log("myJSON.name using file import: " + myJSON.name);
}
return (
<div>
<header>
Everything here is in a REACT App
<p>Success!!</p>
</header>
<form>
<textarea rows="10"
cols="200"
maxlength="5000"
id='myJSONField'
defaultValue='{"name": "This is the name field"}'>
</textarea>
<input
name="DDFConfigJSONReady"
id="DDFConfigJSONReady"
type="checkbox"
onChange={ConfigJSONReady}
/>
</form>
</div>
);
}
export default App;

Answer 1

You are using the wrong API to get the textarea value, you didn't give the name attribute value to the element.
<textarea rows="10"
cols="200" // you are missing `name="myJSONField"`
maxlength="5000"
id='myJSONField'
defaultValue='{"name": "This is the name field"}'>
</textarea>
Instead, you can use document.getElementById() as you already have give an id to the element.
And the value you got from the element is a text, you should parse it to JSON using JSON.parse().
So the code will look like this:
myJSON = document.getElementById("myJSONField").value;
//This returns "undefined" instead of the actual "name" element value
console.log("`myJSON.name` using input field: " + JSON.parse(myJSON).name);
// This is the same JSON object from a file, but it works fine
myJSON = JSONObject;
console.log("myJSON.name using file import: " + myJSON.name);
Live demo here: https://codesandbox.io/s/funny-raman-ktvdzi?file=/src/App.js:141-513

Answer 2

Values read from input fields are of string type, which means, your JSON object is a string as well. In order to convert your JSON string to a JSON object, you need to use JSON.parse() method.
const myObj = "{"key": "value"}";
const parsedObj = JSON.parse(myObj);
And, if you want to convert your JSON object to a string, you can use JSON.stringify() in the similar manner.
const stringifiedObj = JSON.stringify(parsedObj);
Hope that helps!