How do I take a string literal and save it back to raw JSON?

Question

I want to be able to edit object values by putting the value and the "value" of a text input element > JSON.stringify(txt, null, 2) that part works fine.

After submitting that input I'm left with a string literal containing "/n" and "\\" after all quotations marks. I've tried regex and string.replace() to try to remove those but nothing works, my output is always something like this:

 "publisher": "[{\"name\":[\"scripps re\"],\"url\":[\"url.com\"]}]",

I've also tried JSON.parse(txt) and it logs fine but the result still contains line breaks and backslashes.

QUESTION:

Is there a way to take the edited text from an input element and convert that back to valid JSON with no string literal marks?

I'm using:

VueJS , JS .

I've tried to bind the value of the input field like this:

 inputVal = JSON.stringify(object[keyname])

that works fine.

ISSUE:

Assigning the newly edited txt:

 Vue.set(object, keyname, newValue)

newValue always has /n 's and \\ 's

I've tried:

Vue.set(object, keyname, newValue.replace('/n'g,""))

Vue.set(object, keyname, JSON.parse(newValue))


{
  "publisher": "[{\"name\":[\"scripps re\"],\"url\":[\"url.com\"]}]",
  "license": {
  "text": "CC BY-NC 4.0",
  "url": "http://creativecommons.org/licenses/by-nc/4.0/",
  "description": "Attribution-NonCommercial 4.0 International"
}

How can I edit the value of 'license' for example, using a textarea input and save back valid JSON?

Expected result should be (prettified or not, just no line break marks):

{
  "publisher": "[{"name":["scripps re"],"url":["url.com"]}]",
  "license": {
  "text": "CC BY-NC 4.0",
  "url": "http://creativecommons.org/licenses/by-nc/4.0/",
  "description": "Attribution-NonCommercial 4.0 International"
}

Answer 1

The regex needs to be corrected -

Vue.set(object,keyname,newValue.replace('/ng',""))

 s = "[{\\"name\\":[\\"scripps re\\"],\\"url\\":[\\"url.com\\"]}]".replace('/ng', ""); console.log(s);

Also you can use unescape()

 console.log(unescape( "[\\n {\\n \\"identifier\\": [\\n \\"IDEN\\"\\n ],\\n \\"institute\\": [\\n \\"fds\\"\\n ],\\n \\"agency\\": [\\n \\"fds\\"\\n ]\\n }\\n]" ));

However, docodeURI or decodeURIComponent is preferred over unescape by the latest(Aug, 2019) MDN documentation

Answer 2

You can replace all whitespace characters using the /s character class in regex

eg something like this $('textarea').value.replace(/\\s/g, '')

Answer 3

Found the issue!

So I was doing a check to see the type of newdata to avoid using JSON.parse on a string and get an error. The thing is that the result was always a string so all the answers here would've worked. I changed it to check the first index of the string to check for objects or arrays. Now it works great because things are being handled appropriately.

Thank you all that responded, technically all your answers should've worked but the problem was that part of the coded was never being triggered.

  if (newdata.value[0]==="{" || newdata.value[0]==="[") {
                        Vue.set(self.meta,keyname.value,JSON.parse(newdata.value) )
                      }else{
                        Vue.set(self.meta,keyname.value,newdata.value)
                      }