I am currently working on converting a string to JSON in JavaScript and then sending the converted string to an HTML textarea element. The original string from the backend looks like this:
"customBar_query": "select\\n\\neq.Name,\\nAVG(Payload) as [Average Payload]\\n\\nfrom tbl.Cycles as c\\nleft join dim.Equipment as eq on eq.Id = c.Truck_Id\\nwhere c.Timestamp_Loading >= DATEADD(day,-365,GETDATE())\\n\\nGROUP BY eq.Name\\n\\nORDER BY [Average Payload] DESC"
The "\\n" sequence is meant to represent a newline character.
Here is how I'm parsing the string:
var newChartData = JSON.parse(data);
The resulting JavaScript string looks like this:
customBar_query: "select\n\neq.Name,\nAVG(Payload) as [Average Payload]\n\nfrom tbl.Cycles as c\nleft join dim.Equipment as eq on eq.Id = c.Truck_Id\nwhere c.Timestamp_Loading >= DATEADD(day,-365,GETDATE())\n\nGROUP BY eq.Name\n\nORDER BY [Average Payload] DESC"
At first glance, everything seems fine. However, when inspecting the object in Developer Tools, the expected "enter" symbol denoting a new line is not visible. Similarly, assigning this value to a textarea using jQuery's .val() displays the text with "\n" strings instead of actual line breaks, like so:
select\n\neq.Name,\nAVG(Payload) as [Average Payload]\n\nfrom tbl.Cycles as c\nleft join dim.Equipment as eq on eq.Id = c.Truck_Id\nwhere c.Timestamp_Loading >= DATEADD(day,-365,GETDATE())\n\nGROUP BY eq.Name\n\nORDER BY [Average Payload] DESC
I am unable to comprehend why this is happening. This behavior is unexpected and I would appreciate any guidance or suggestions!
UPDATE
For reference, below is a snippet from Chrome Developer Tools showing that the string \n is not being displayed as an "enter" symbol.