JSON.parse() returns a string instead of object

Question

I'd hate to open a new question even though many questions have been opened on this same topic, but I'm literally at my ends as to why this isn't working.

I am attempting to create a JSON object with the following code:

                var p = JSON.stringify(decodeJSON('{{post.as_json}}'))
                var post = JSON.parse(p);
                console.log(post); // Debug log to test if code is valid

And the decodeJSON function:

    function decodeJSON(json) {
        var txt = document.createElement("textarea");
        txt.innerHTML = json;
        return txt.value.replace(/u'/g, "'");
        }

console.log(post) returns the following JSON string:

{'content': 'kj fasf', 'uid': '4eL1BQ__', 'created': '07/09/2017', 'replies': [], 'tags': ['python'], 'by': {'username': 'Dorian', 'img_url': '/static/imgs/user_Dorian/beaut.jpg'}, 'likes': 0}

After scanning through the string I am pretty sure that the JSON is valid and there are no syntax errors. However, when running JSON.parse(p) Instead of receiving an object, I get a string back. What could be the cause?

@baao I thought that could be the cause as well. So I tried replacing all of the `'` with `"`, but I then get an `Invalid token` error. — Dorian Dore, Sep 26 '17 at 14:41
It seems like you are using a templating engine. If yes, all you have to do is `var post = {{post.as_json}};` and call it a day. However, that assumes that `as_json` really returns JSON which doesn’t seem to be the case. You should fix that first. Everything else is just a hacky workaround. — Felix Kling, Sep 26 '17 at 14:46
It returns extra HTML symbols like `'` which I use the `decodeJSON` post to remove. — Dorian Dore, Sep 26 '17 at 14:51
Why don't you decode HTML entities on the server? I assume you are using Python: https://stackoverflow.com/questions/2087370/decode-html-entities-in-python-string . — Felix Kling, Sep 26 '17 at 21:22

Mihai Alexandru-Ionut · Answer 1 · 2017-09-26T15:00:42.160

That's because decodeJSON returns a string, and JSON.stringify turns that string in another string.

In the other hand, you used JSON.strigify() method on a string. You should stringify an object, not string.

JSON.stringify() turns a javascript object to json text and stores it in a string.

When you use JSON.parse you obtain the string returned by decodedJSON function, not object.

Solution:

var p = JSON.stringify('{{post.as_json}}');
var post = JSON.parse(p);
console.log(post);

It gives me Uncaught SyntaxError: Unexpected token ' in JSON at position 1

The solution is to modify your decodeJSON method.

function decodeJSON(json) {
    var txt = document.createElement("textarea");
    txt.innerHTML = json;
    return txt.value.replace(/u'/g, '\"');
}

var p = decodeJSON('{{post.as_json}}');
var post = JSON.parse(p);
console.log(post);

score 1 · Answer 2 · answered Sep 26 '17 at 14:42

1

The issue in your code is that you are performing JSON.stringify on a string itself. So on parsing the result of this string will be a string. In effect, you have stringified twice and parsed once. If you parse it once more you will get a JSON. But for solution avoid the stringification twice.

Replace in your code.

var p = decodeJSON('{{post.as_json}}');

That will work

answered Sep 26 '17 at 14:42

Nitheesh

19,238
3
22
49

It gives me `Uncaught SyntaxError: Unexpected token ' in JSON at position 1` – Dorian Dore Sep 26 '17 at 14:49

JSON.parse() returns a string instead of object

2 Answers2