What could be causing JSON.parse() to not function as intended?

Question

What could be causing JSON.parse() to not function as intended?

How can it be that this code snippet:

this.store.select(getAuthResponseSelector)
        .subscribe((response: AuthenticateResponse) => {
            if (response != null) {
                console.log('Response', response);
                console.log('ResponseType', typeof response);
                console.log('EntroSubscribeTokenBefore', JSON.parse(JSON.stringify(response)));
                console.log('EntroSubscribeTokenType', typeof JSON.parse(JSON.stringify(response)));
                console.log('EntroSubscribeToken', JSON.parse(JSON.stringify(response)).access_token);
                const newToken = Object.assign({}, response);
                console.log('NewObject', typeof newToken);
                for(let key in newToken){
                    console.log('Key:', newToken[key])
                }
                this.token = newToken.access_token
            }
        });

This is the resulting output:

[12:32:39]  console.log: Response
            {"access_token":"afcddc76-8322-4186-9b54-aa4143f381eb","token_type":"bearer","refresh_token":"fda3fcf4-8335-45cf-94ca-cd0aec1a90cb","expires_in":26313,"scope":"custom
            default","firstname":"testswinetmm_cost","lastname":"testswinetmm_cost","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="562233252225213f3833223b3b093539252216223325223f38313b373f3a7835393b">[email protected]</a>","uid":"testswinetmm_cost"}
[12:32:39]  console.log: ResponseType string
[12:32:39]  console.log: EntroSubscribeTokenBefore
            {"access_token":"afcddc76-8322-4186-9b54-aa4143f381eb","token_type":"bearer","refresh_token":"fda3fcf4-8335-45cf-94ca-cd0aec1a90cb","expires_in":26313,"scope":"custom
            default","firstname":"testswinetmm_cost","lastname":"testswinetmm_cost","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89c8d9b9c9b9f81868d9c8585b78b879b9ca89c8d9b9c81868f85898184c68b8785">[email protected]</a>","uid":"testswinetmm_cost"}
[12:32:39]  console.log: EntroSubscribeTokenType string
[12:32:39]  console.log: EntroSubscribeToken
[12:32:39]  console.log: NewObject object
[12:32:39]  console.log: Key: {
[12:32:39]  console.log: Key: "
[12:32:39]  console.log: Key: a
[12:32:39]  console.log: Key: c
[12:32:39]  console.log: Key: c
[12:32:39]  console.log: Key: e
[12:32:39]  console.log: Key: s
[12:32:39]  console.log: Key: s
[12:32:39]  console.log: Key: _
[12:32:39]  console.log: Key: t
[12:32:39]  console.log: Key: o
[12:32:39]  console.log: Key: k
[12:32:39]  console.log: Key: e
[12:32:39]  console.log: Key: n
[12:32:39]  console.log: Key: "
[12:32:39]  console.log: Key: :
[12:32:39]  console.log: Key: "
[12:32:39]  console.log: Key: a
[12:32:39]  console.log: Key: f
[12:32:39]  console.log: Key: c
[12:32:39]  console.log: Key: d
[12:32:39]  console.log: Key: d
...

The response object has a custom type, but when trying to convert it into a JSON format, unexpected results are obtained. Can anyone shed light on how this is happening?

UPDATE

Even when attempting to stringify a string which should throw an error, creating a new object with Object.assign() prints out as an object type, yet iterating through its properties displays each letter as a separate string - which seems illogical.

UPDATE 2 I am aware that using JSON.parse(JSON.stringify()) may not make sense in this scenario. I have tried various conversions due to discrepancies between the expected and received responses.

P.S: Although unusual, JSON.parse(JSON.stringify()) is often utilized for generating deep copies of a JSON object :)

javascript json

Answer 1

Answer №1

The reason for this issue may be that your response variable is being treated as a string instead of an object. When you use JSON.stringify, it converts the string into a JSON format, and then JSON.parse decodes that JSON string back into a regular string.

Update:

Keep in mind that even if you specify response: AuthenticateResponse in TypeScript, there is a possibility that the actual type of response is a string containing JSON data.

Answer 2

The reason for this issue may be that your response variable is being treated as a string instead of an object. When you use JSON.stringify, it converts the string into a JSON format, and then JSON.parse decodes that JSON string back into a regular string.

Update:

Keep in mind that even if you specify response: AuthenticateResponse in TypeScript, there is a possibility that the actual type of response is a string containing JSON data.

Answer 3

Answer №2

It seems that the variable response is a string, so it needs to be parsed with JSON.parse() before it can be used correctly. Currently, you are looping over each character in the string.

Here is what I believe you intended to achieve (note the use of JSON.parse(), and Object.assign() is unnecessary here):

var response = '{"access_token":"afcddc76-8322-4186-9b54-aa4143f381eb","token_type":"bearer","refresh_token":"fda3fcf4-8335-45cf-94ca-cd0aec1a90cb","expires_in":29605,"scope":"custom default","firstname":"testswinetmm_cost","lastname":"testswinetmm_cost","email":"example@email.com","uid":"testswinetmm_cost"}';
const newToken = JSON.parse(response);

for(let key in newToken){
   console.log(key, ":", newToken[key])
}

P.S. The code

JSON.parse(JSON.stringify(response))

in your Console does not make sense. When you parse and stringify at the same time, you end up with the original input because they are opposites. Use parse() for strings to objects and stringify() for objects to strings. Using both simultaneously only adds confusion.

Answer 4

It seems that the variable response is a string, so it needs to be parsed with JSON.parse() before it can be used correctly. Currently, you are looping over each character in the string.

Here is what I believe you intended to achieve (note the use of JSON.parse(), and Object.assign() is unnecessary here):

var response = '{"access_token":"afcddc76-8322-4186-9b54-aa4143f381eb","token_type":"bearer","refresh_token":"fda3fcf4-8335-45cf-94ca-cd0aec1a90cb","expires_in":29605,"scope":"custom default","firstname":"testswinetmm_cost","lastname":"testswinetmm_cost","email":"example@email.com","uid":"testswinetmm_cost"}';
const newToken = JSON.parse(response);

for(let key in newToken){
   console.log(key, ":", newToken[key])
}

P.S. The code

JSON.parse(JSON.stringify(response))

in your Console does not make sense. When you parse and stringify at the same time, you end up with the original input because they are opposites. Use parse() for strings to objects and stringify() for objects to strings. Using both simultaneously only adds confusion.

Answer 5

Answer №3

console.log('CheckingSubscribeTokenType', typeof JSON.parse(JSON.stringify(response)));

[11:37:46] console.log: CheckingSubscribeTokenType string

In simpler terms, the output indicates that response is actually a string value.

const json = '{ "name" : "Fred" }';
console.log(typeof json, json);

const jsonToString = JSON.stringify(json);
console.log(typeof jsonToString, jsonToString);

const jsonToStringParsed = JSON.parse(jsonToString);
console.log(typeof jsonToStringParsed, jsonToStringParsed);

console.log("json === jsonToStringParsed", json === jsonToStringParsed);

As such, when attempting to create a new object, you are essentially dealing with a string. Consequently, using Object.assign will yield an unexpected result:

const response = '{ "name" : "Fred" }';

const newToken = Object.assign({}, response);

console.log(typeof newToken);
console.log(newToken);

The created object originates from the string input, hence the key-value pairs represent indexes and associated characters. This transformation occurs because the string primitive is converted into a String object for copying purposes.

const stringObject = new String( '{ "name" : "Fred" }');

console.log("typeof stringObject:", typeof stringObject);
console.log("stringObject instanceof String:", stringObject instanceof String);
console.log(stringObject);

Hence, iterating over newToken involves navigating through an object that represents a String object representation of a string input.

const response = '{ "name" : "Fred" }';

const newToken = Object.assign({}, response);

for (let key in newToken) {
  console.log("key -> value:", key, newToken[key])
}

Furthermore, it's worth noting that Object.assign() does NOT duplicate the String object – instead, it produces a plain object due to the absence of prototype inheritance:

const string = '{ "name" : "Fred" }';
const stringObject = new String(string);

const newTokenFromString = Object.assign({}, string);
const newTokenFromStringObject = Object.assign({}, stringObject);

//false - as it's a string primitive
console.log("string instanceof String:", string instanceof String);
//true
console.log("stringObject instanceof String:", stringObject instanceof String);
//false - denoting an object, not an instance of String
console.log("newTokenFromString instanceof String:", newTokenFromString instanceof String);
//false - representing an object, not an instance of String
console.log("newTokenFromStringObject instanceof String:", newTokenFromStringObject instanceof String);

Answer 6

console.log('CheckingSubscribeTokenType', typeof JSON.parse(JSON.stringify(response)));

[11:37:46] console.log: CheckingSubscribeTokenType string

In simpler terms, the output indicates that response is actually a string value.

const json = '{ "name" : "Fred" }';
console.log(typeof json, json);

const jsonToString = JSON.stringify(json);
console.log(typeof jsonToString, jsonToString);

const jsonToStringParsed = JSON.parse(jsonToString);
console.log(typeof jsonToStringParsed, jsonToStringParsed);

console.log("json === jsonToStringParsed", json === jsonToStringParsed);

As such, when attempting to create a new object, you are essentially dealing with a string. Consequently, using Object.assign will yield an unexpected result:

const response = '{ "name" : "Fred" }';

const newToken = Object.assign({}, response);

console.log(typeof newToken);
console.log(newToken);

The created object originates from the string input, hence the key-value pairs represent indexes and associated characters. This transformation occurs because the string primitive is converted into a String object for copying purposes.

const stringObject = new String( '{ "name" : "Fred" }');

console.log("typeof stringObject:", typeof stringObject);
console.log("stringObject instanceof String:", stringObject instanceof String);
console.log(stringObject);

Hence, iterating over newToken involves navigating through an object that represents a String object representation of a string input.

const response = '{ "name" : "Fred" }';

const newToken = Object.assign({}, response);

for (let key in newToken) {
  console.log("key -> value:", key, newToken[key])
}

Furthermore, it's worth noting that Object.assign() does NOT duplicate the String object – instead, it produces a plain object due to the absence of prototype inheritance:

const string = '{ "name" : "Fred" }';
const stringObject = new String(string);

const newTokenFromString = Object.assign({}, string);
const newTokenFromStringObject = Object.assign({}, stringObject);

//false - as it's a string primitive
console.log("string instanceof String:", string instanceof String);
//true
console.log("stringObject instanceof String:", stringObject instanceof String);
//false - denoting an object, not an instance of String
console.log("newTokenFromString instanceof String:", newTokenFromString instanceof String);
//false - representing an object, not an instance of String
console.log("newTokenFromStringObject instanceof String:", newTokenFromStringObject instanceof String);

Answer 7

Answer №4

If you're receiving a response in Object format, you can verify the validity of the JSON data syntax by pasting the response text into an online JSON parser such as JSON Formatter.

Answer 8

If you're receiving a response in Object format, you can verify the validity of the JSON data syntax by pasting the response text into an online JSON parser such as JSON Formatter.

What could be causing JSON.parse() to not function as intended?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

Adjust the appearance using Timeout within a React component

JavaScript still mentions a class that no longer exists

Discover local points of interest with the Google Places API integration on your WordPress site through PHP programming

Navigating with the mouse in THREE.js

Triggering an automatic pop-up window using JavaScript based on a PHP condition

Searching for JSON array fields in a PostgreSQL database using Rails

The DIV element only becomes visible after a postback occurs

Having trouble getting the finally clause to work properly in Angular JS version 1.7

Time when the client request was initiated

Ways to include new elements in JSON

Vue.js - I am looking to create dynamic buttons that change color when clicked

Extract every value associated with a particular key using JSON

Adding information to a pre-existing JSON Array using C#

ngFor filter for converting strings to lowercase

Grouping JSON data in Javascript, such that multiple fields are returned within the parent object

Eslint requires that return values are used effectively

Displaying a quasar table with rows sourced from an object of objects stored in the

Issue with SCSS Syntax in Vue Jest Test runner

Exploring the Functionality of POST in AJAX Requests