Every time I use JSON.stringify on an object, I end up with a wild and wacky string returned

Question

Every time I use JSON.stringify on an object, I end up with a wild and wacky string returned

Whenever I attempt to transmit an object containing an array of objects from my express route to the client, I receive an [Object object]. Then, when I try to convert it into a string using JSON.stringify, I end up with a convoluted string along with a console message.

var messages = "<%=(JSON.stringify(messages))%>"
console.log(messages)

This is what gets displayed in the console...

{&#34;messages&#34;:[{&#34;content&#34;:&#34;cool mane&#34;,&#34;creator&#34;:&#34;joe&#34;},{&#34;content&#34;:&#34;test 4&#34;,&#34;creator&#34;:&#34;joe&#34;},{&#34;content&#34;:&#34; ewgdqf&#34;,&#34;creator&#34;:&#34;joe&#34;},

I expect to be able to iterate through the data by accessing messages[0].content, but instead, I am presented with a confusing string that hinders any further manipulation...

Any attempts at looping through the string only results in each character being printed individually.

javascript json express ejs

Answer 1

Answer №1

By utilizing the EJS syntax <%= ... %>, any output is encoded or escaped automatically. This explains why the quotations marks ("") in the JSON data are shown as ". As referenced in this particular response, one way to avoid escaping is by opting for <%- ... %>.

Furthermore, there is no necessity to enclose the generated content within a string literal. In fact, this practice should be avoided as it may lead to issues with nested quotes. Allow the output to be directly inserted into the JavaScript code like so:

var data = <%-JSON.stringify(data)%>;

Answer 2

By utilizing the EJS syntax <%= ... %>, any output is encoded or escaped automatically. This explains why the quotations marks ("") in the JSON data are shown as ". As referenced in this particular response, one way to avoid escaping is by opting for <%- ... %>.

Furthermore, there is no necessity to enclose the generated content within a string literal. In fact, this practice should be avoided as it may lead to issues with nested quotes. Allow the output to be directly inserted into the JavaScript code like so:

var data = <%-JSON.stringify(data)%>;

Answer 3

Answer №2

Consider replacing the following code snippet:

var data = "<%=(JSON.stringify(data))%>"
console.log(data)

With this alternative approach:

var data = JSON.stringify("<%=data%>");
console.log(data)

Answer 4

Consider replacing the following code snippet:

var data = "<%=(JSON.stringify(data))%>"
console.log(data)

With this alternative approach:

var data = JSON.stringify("<%=data%>");
console.log(data)

Every time I use JSON.stringify on an object, I end up with a wild and wacky string returned

Answer №1

Answer №2

Similar questions

Error: Syntax error - V token not recognized

What is the best way to conceal specific series in a HighCharts legend?

Is it possible to implement Google authentication with Passport.js session in a Next.js application?

Having trouble accessing Vuex's getter property within a computed property

Strive to discover the ideal solution for capturing a screenshot of an OpenLayers map using html2canvas. Currently, the map elements are losing their CSS classes and images are not

customizing highcharts title within a popup window

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

What are some creative ways to utilize postMessage instead of relying on nextTick or setTimeout with a zero millisecond delay?

The input value remains a string even after it has been converted to a float

Is it possible to utilize hooks such as 'useState' within an async/await server component?

I have a task of extracting information from a live Google map and generating a static Google map using API V3

What is the best way to transfer data from my browser to the backend of my application?

Change all instances of the subtraction symbol to parentheses using jQuery

Having trouble with the alias in commander.js not functioning as desired when using the "--help" option

Issue with the scope causing global variable not to update when button is pressed

Changing a Unique JSON Structure into a VB.NET Object

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

What is the proper method for setting initial values for scope upon loading the view using AngularJS and ngInit?

When modifying v-model directly in a Vue instance, the Vuetify component on the screen may not update its displayed value

Transferring a zipped file between a Node.js server and a Node.js client