JSON.parse returns string instead of object

Question

im writing a websocket client and i would like to receive messages as json strings. For this I need a login. And if the login isn't true i send a json string with nosuccess. JSON String:

{"action":"login","args":["nosuccess"]}

On the client I'm using this to get the string:

WebSocket socket = new WebSocket("ws://localhost:2555/api");

socket.onmessage = function(evt) {
    console.log(evt.data);
    console.log(typeof(evt.data));
    onMessage(evt);
}
function onMessage(evt) {
var data = JSON.parse(evt.data);
var action = data.action;
var args = data.args;
console.log(data);
console.log(typeof(data));
console.log(action);
console.log(args);

But the type of data is a string... But why?

evt.data returns:

 "{\"action\":\"login\",\"args\":[\"nosuccess\"]}"

data returns:

 {"action":"login","args":["nosuccess"]}

The WebSocket server is a jetty Server which sends a string and a string array in json parsed in json with gson.toJson(class) Gson by Google. The Class is a class containing String action and String array args.

Complete source code of websocket.js:

var socket;

function openWebsocket(adress) {
    socket = new WebSocket(adress);
    socket.onopen = function(evt) {
        console.log("Socket opened [" + adress + "]");
    };
    socket.onclose = function(evt) {
        loadPage("login.html");
        console.log("Socket closed [" + evt.code + "]");
    }
    socket.onmessage = function(evt) {
        onMessage(evt);
    }
    socket.onerror = function(evt) {
        console.log("Socket couldn't connect [" + evt.message + "]");
        showMessage("fa-exclamation-circle", "Socket couldn't be established!", 1000);
    }
}

function onMessage(evt) {
    var data = JSON.parse(evt.data);
    var action = data.action;
    var args = data.args;
    console.log(data);
    console.log(typeof(data));
    console.log(action);
    console.log(args);
    $(".card-container h3").html(data);

    if(action == "login") {
        if(args[0] == "success") {
            loadPage("dashboard.htm");
            currentpage = "dashboard.htm";
            showMessage("fa-check", "Du wurdest erfolgreich eingeloggt", 2000);
        } else if(args[0] == "nosuccess") {
            loadPage("login.html");
            currentpage = "login.html";
            showMessage("fa-exclamation-circle", "Falscher Benutzername oder falsches Passwort", 2000);
        } else if(args[0] == "unauthenticated") {
            loadPage("login.html");
            currentpage = "login.html";
            showMessage("fa-exclamation-circle", "Login failure: not authenticated", 2000);
        }
    }

}

function sendMessage(json) {
    $(".card-container h3").html(JSON.stringify(json));
    console.log(JSON.stringify(json));
    socket.send(JSON.stringify(json));
}

If I change this line:

 var data = JSON.parse(evt.data);

to this:

var data = JSON.parse("{\"action\":\"login\",\"args\":[\"nosuccess\"]}");

Then it is a json object, but when I use evt.data then it is a string. If I change the line to this:

    var data = JSON.parse(JSON.parse(evt.data));

Then it works, but why, normally it should do it with only one JSON.parse, should it?

jsbin.com/morutob/1/edit?js,console — I can't reproduce the problem. You must be mistaken about the value of evt.data. — Quentin
– Quentin, Commented Feb 27, 2017 at 20:12
If I write the value of evt.data in JSON.parse(); like JSON.parse( "{\"action\":\"login\",\"args\":[\"nosuccess\"]}"); in manually then it parse it to a object — Nightloewe
– Nightloewe, Commented Feb 27, 2017 at 20:16
If you write it manually and get an object, but get it from evt.data and don't … then what you are writing manually and what you are getting from evt.data are different so you must be mistaken about the value of evt.data. — Quentin
– Quentin, Commented Feb 27, 2017 at 22:24
I had the exact same problem, and it was a an object that was stringified twice — andy mccullough
– andy mccullough, Commented Dec 20, 2017 at 15:03

DerpSuperleggera · Accepted Answer · 2018-08-21 19:49:41Z

77

This seems to be fairly consistent with over-stringified strings. For example I loaded a text file using FileReader.readAsText that came with \n and \r which rendered in the console, so I did - (JSON.stringify(reader.result)).replace(/(?:\\[rn])+/g, '') first to see the symbols, then to get rid of them. Taking that and running JSON.parse() on it converts it to a non-escaped string, so running JSON.parse() again creates an object.

If you do not stringify your string, it will convert to an object and often it is not necessary but if you have no control over the obtained value, then running JSON.parse() twice will do the trick.

answered Aug 21, 2018 at 19:49

DerpSuperleggera

7866 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wkille Over a year ago

+1. According to JSON.parse() JSON.parse() returns "The Object, Array, string, number, boolean, or null value corresponding to the given JSON text." So, 1. I need to remember that JSON can be used to represent more than just objects (I think the confusing thing is that you can stringify strings) and 2. one must 'un-stringify' (parse) as many times as the JSON is stringified.

Madhur · Accepted Answer · 2021-12-02 07:18:26Z

17

@DerpSuperleggera is correct. The issue was indeed an over-stringified string

let arr = "[\"~#iM\",[\"is_logged_out_token\",false,\"token_type\",\"Bearer\"]]"

So to parse it as an object, I just ran it through JSON.parse twice and that did the trick!

let obj = JSON.parse(JSON.parse(arr))

answered Dec 2, 2021 at 7:18

Madhur

2,2191 gold badge25 silver badges32 bronze badges

Comments

crg · Accepted Answer · 2021-05-18 10:37:08Z

8

The checked response is correct in that it seems to be an issue of over-stringified strings. I came across it from using AWS Amplify AWSJSON type in my project. The solution that worked for me was to iterate multiple (twice) to get an object.

Wrote a simple JS function that when used to parse will return an object. There isn't really error checking, but a starting point.

    export function jsonParser(blob) {
       let parsed = JSON.parse(blob);
       if (typeof parsed === 'string') parsed = jsonParser(parsed);
       return parsed;
    }

edited May 18, 2021 at 10:37

crg

4,5963 gold badges39 silver badges70 bronze badges

answered May 17, 2021 at 20:37

Martin Rojas

1631 silver badge7 bronze badges

Comments

Jim · Accepted Answer · 2017-02-27 20:38:09Z

As others have stated in the comments it seems that this issue has been solved. If you are receiving a response from the server as a "stringified object" then you can turn it into a normal object with JSON.parse() like so:

var stringResponse = '{"action":"login","args":["nosuccess"]}';

var objResponse = JSON.parse(stringResponse);

console.log(objResponse.args);

You can also try out the above code here.

As for why the server is returning a string when you really wanted an object, that really comes down to your backend code, what library you are using, and the transport protocol. If you just want your front-end code to work, use JSON.parse. If you want to edit how the backend responds, please provide more information.

Collectives™ on Stack Overflow

JSON.parse returns string instead of object

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related