convert textarea input to javascript object?

bit of a junior dev here, i have a text area which will receive an input of an array of objects like so ..

[
  {
     utc: "xxxxxx",
     battery_level: 12,
     lat: 2345678,
     lng: 234567,
   },
   {
     utc: "xxxxxx",
     battery_level: 12,
     lat: 2345678,
     lng: 234567,
    }
]

the text area input converts it to string like..

'[\n  {\n     utc: "xxxxxx",\n     battery_level: 12,\n… 12,\n     lat: 2345678,\n     lng: 234567,\n    }\n]'

i need to convert that back to a javascript object. i have tried JSON.parse which throw an error ‘unexpected token u at position 10’ the u of utc because it is NOT a string key.

i have tried JSON.stringify to JSON.parse which still returns a string.

the project is using react with typescript. any help would be appreciated.

>Solution :

The problem is that the JavaScript objects may or may not have quotes, while the JSON standard requires double quotes for each property name.

For this reason, you cannot use JSON.parse, since that is not a valid JSON.

You have three alternatives:

• Create a parser that converts your string into an object (zero dep.)
• Use eval, which would introduce vulnerabilities. You said that users can paste anything into the textbox, so the use of eval is highly discouraged
• Use JSON5

Indeed, JSON5 does exactly what you need to do:

JSON5.parse('[\n  {\n     utc: "xxxxxx",\n     battery_level: 12,\n… 12,\n     lat: 2345678,\n     lng: 234567,\n    }\n]')