如何在 textarea（HTML 标记）中写入 JavaScript object 以使用 documentQuerySelector 获取 object

Question

I wanna write javascript object in Textarea or input field and wanna retrieve those data by using documentQuerySelector. but when I do this it returns a string.

IS there any way to write javascript code in the browser and access that code form my javascript file like app.js

HTML

<textarea />

I use Event for the value In react

JS / REACT I

e.target.value

the object that i write in the text area

{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
} 

but when i retrieve the data and console.log it gives string instead of js object

"{
  quizTitle: "React Quiz Component Demo",
  quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  questions: [
    {
      question: "How can you access the state of a component from inside of a member function?",
      questionType: "text",
      questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question
      answerSelectionType: "single",
      answers: [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
     correctAnswe": "3",
      messageForCorrectAnswer: "Correct answer. Good job.",
      messageForIncorrectAnswer: "Incorrect answer. Please try again.",
      explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
     point: "20"
    }
  ]
}"

Answer 1

The event.target.value for textarea in this case will return you a string

If you want the object, you must use JSON.parse(textValue) to get it

Moreover, the textValue passed to JSON.parse must be a valid JSON (you could look at the MDN doc for more detail on what a valid JSON would look like)

For example, to get it, you could declare an object and use JSON.stringify(obj) to get the valid JSON.

 const a = { quizTitle: "React Quiz Component Demo", quizSynopsis: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim", questions: [ { question: "How can you access the state of a component from inside of a member function?", questionType: "text", questionPic: "https://dummyimage.com/600x400/000/fff&text=X", // if you need to display Picture in Question answerSelectionType: "single", answers: [ "this.getState()", "this.prototype.stateValue", "this.state", "this.values", ], correctAnswer: "3", messageForCorrectAnswer: "Correct answer. Good job.", messageForIncorrectAnswer: "Incorrect answer. Please try again.", explanation: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", point: "20", }, ], }; console.log(JSON.stringify(a, null, 2));

{
  "quizTitle": "React Quiz Component Demo",
  "quizSynopsis": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim",
  "questions": [
    {
      "question": "How can you access the state of a component from inside of a member function?",
      "questionType": "text",
      "questionPic": "https://dummyimage.com/600x400/000/fff&text=X",
      "answerSelectionType": "single",
      "answers": [
        "this.getState()",
        "this.prototype.stateValue",
        "this.state",
        "this.values"
      ],
      "correctAnswer": "3",
      "messageForCorrectAnswer": "Correct answer. Good job.",
      "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
      "explanation": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "point": "20"
    }
  ]
}

After having a valid JSON string, paste it in the textarea, and when you get the value from textarea, just JSON.parse() that value to get your object value

export default function App() {
  const [value, setValue] = React.useState('')

  const handleClick = () => {
    try {
      console.log(JSON.parse(value))
      alert('check the console log')
    } catch(err) {
      console.error(err)
      alert('not a valid JSON')
    }
  }
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <textarea rows="30" cols="60" value={value} onChange={e => setValue(e.target.value)}/>
      <br/>
      <button onClick={handleClick}>Get JSON</button>
    </div>
  );
}