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
– Dorian Dore, Commented Sep 26, 2017 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
– Felix Kling, Commented Sep 26, 2017 at 14:46
It returns extra HTML symbols like ' which I use the decodeJSON post to remove. — Dorian Dore
– Dorian Dore, Commented Sep 26, 2017 at 14:51
Why don't you decode HTML entities on the server? I assume you are using Python: stackoverflow.com/questions/2087370/… . — Felix Kling
– Felix Kling, Commented Sep 26, 2017 at 21:22

Mihai Alexandru-Ionut · Accepted Answer · 2017-09-26 15:00:42Z

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);

Nitheesh · Accepted Answer · 2017-09-26 14:42:46Z

2

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, 2017 at 14:42

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

1 Comment

Dorian Dore Over a year ago

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

Collectives™ on Stack Overflow

JSON.parse() returns a string instead of object

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related