Reading JSON elements from a field value using REACT-CodePudding

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 work 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;

CodePudding user response：

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

CodePudding user response：

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!