Javascript JSON.parse() error while trying to parse stringified quill.js quill

Question

I am trying to send some objects to client using ejs. I haven't had any problems while doing so, so far at least. I store quills like this

{"form_type":"blog","form_sub_type":"create","blog_title":"Test","quill_0":"{\"ops\":[{\"insert\":\"tesarfd\\n\"}]}"}

When I try to send them to client first I run this function to get the object from file

const fileToJson = async (filePath) => {
    return new Promise(resolve => {
        fs.readFile(filePath, 'utf-8', (err, data) => {
            if (err) {
                console.log(err);
                resolve(false);
            }
            resolve(data);//returns json string 
        })
    })
}

At client, I tried using the following:

'<%-JSON.stringify(blog)%>'
'<%-blog%>'

When I logged the second one I only got [Object object] and couldn't access its fields. When I logged the first one I got:

{"edit":true,"editable":true,"blog_id":3,"blog":{"form_type":"blog","form_sub_type":"create","blog_title":"Test","quill_0":"{"ops":[{"insert":"tesarfd\n"}]}"}}

and cannot parse it.

Code that produces the error:

 const blog_info = '<%-JSON.stringify(blog)%>';
    console.log(JSON.parse(blog_info));

Error:

Uncaught SyntaxError: Unexpected token f in JSON at position 51
    at JSON.parse (<anonymous>)
    at blog_panel?id=6:335

Edit2: the line from source with another string that produces the same error

const blog_content=JSON.parse('{"edit":true,"editable":true,"blog_id":7,"blog":"{\"form_type\":\"blog\",\"form_sub_type\":\"create\",\"blog_title\":\"Test\",\"quill_0\":\"\\\"<p>Test</p>\\\"\"}"}');

JSON.parse() throws:

Uncaught SyntaxError: Unexpected token o in JSON at position 3
    at JSON.parse (<anonymous>)
    at blog_panel?id=6:335

Answer 1

The problem with:

const blog_info = '<%-JSON.stringify(blog)%>';
console.log(JSON.parse(blog_info));

Is that <%-JSON.stringify(blog)%> is placed within string context (single quotes in this case). Let me give you an example that demonstrates the issue.

// example #1
// assumption
<% blog = {title: "Let's play Tic-Tac-Toe"} %>

// Then this will result in:
const blog_info = '<%-JSON.stringify(blog)%>';
const blog_info = '{"title":"Let's play Tic-Tac-Toe"}';
// Uncaught SyntaxError: unexpected token: identifier

// example #2
// assumption
<% blog = {title: "foo\nbar"} %>

// Then this will result in:
const blog_info = '<%-JSON.stringify(blog)%>';
const blog_info = '{"title":"foo\nbar"}';
console.log(JSON.parse(blog_info));
// Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 14 of the JSON data

Instead of placing the result in string context assign it directly to the variable. JSON stands for JavaScript Object Notation and is compatible with normal JavaScript^*. This means changing the code to:

const blog_info = <%-JSON.stringify(blog)%>;
console.log(blog_info);

Using the same examples as above this results in:

// example #1
// assumption
<% blog = {title: "Let's play Tic-Tac-Toe"} %>

// Then this will result in:
const blog_info = <%-JSON.stringify(blog)%>;
const blog_info = {"title":"Let's play Tic-Tac-Toe"};
console.log(blog_info);
// prints: ⏵ Object { title: "Let's play Tic-Tac-Toe" }

// example #2
// assumption
<% blog = {title: "foo\nbar"} %>

// Then this will result in:
const blog_info = <%-JSON.stringify(blog)%>;
const blog_info = {"title": "foo\nbar"};
console.log(blog_info);
// prints: ⏵ Object { title: "foo\nbar" }