Extracting the Hidden Gems in a Nested Object

Question

Extracting the Hidden Gems in a Nested Object

My goal is to extract a specific value from a two-level deep object data structure. To begin, I am storing the data in a variable within a function, like so:

getTargetId() {
    if (this.authenticationService.isAuthenticated()) {
        const userInfo = sessionStorage.getItem('currentUser');
        console.log(userInfo);
    }
}

When I use this line of code:

console.log(userInfo);

The console output looks like this:

{"token":"sometoken.value","data":{"_id":"8cd0362c0", "phone":"555-4343"...}

Specifically, I want to retrieve the "_id" value from this data.

I attempted to access it using:

console.log(userInfo.data._id);

However, my IDE displays an error message:

'Property '_id' does not exist on type 'string'.

How can I successfully extract the "_id" value in this scenario?

javascript parsing typescript

Answer 1

Answer №1

It appears you may be accessing it incorrectly
Please try using userInfo.data._id
In the object's log, you will notice that data is a separate object indicated by curly braces {}, so once you access data, you can then access its properties in the same way as any other object.

I also notice that you are receiving

'Property '_id' does not exist on type 'string'.

This error suggests that you may have missed parsing the information. To confirm this, execute the following:

Execute->

console.log(userInfo);

Output->

{"token":"sometoken.value","data":{"_id":"8cd0362c0", "phone":"555-4343"...}

Following this:
Execute->

console.log(typeof userInfo);

Output->

"string"

Based on your changes, it seems this is indeed the issue.
Please try:

userInfo = JSON.parse(sessionStorage.getItem('currentUser') );
console.log(userInfo.data._id);

Answer 2

It appears you may be accessing it incorrectly
Please try using userInfo.data._id
In the object's log, you will notice that data is a separate object indicated by curly braces {}, so once you access data, you can then access its properties in the same way as any other object.

I also notice that you are receiving

'Property '_id' does not exist on type 'string'.

This error suggests that you may have missed parsing the information. To confirm this, execute the following:

Execute->

console.log(userInfo);

Output->

{"token":"sometoken.value","data":{"_id":"8cd0362c0", "phone":"555-4343"...}

Following this:
Execute->

console.log(typeof userInfo);

Output->

"string"

Based on your changes, it seems this is indeed the issue.
Please try:

userInfo = JSON.parse(sessionStorage.getItem('currentUser') );
console.log(userInfo.data._id);

Answer 3

Answer №2

The _id attribute can be found within the data section:

const response = {
    "token":"sometoken.value",
    "data": {
       "_id":"8cd0362c0",
       "phone":"555-4343"
     }
};
console.log(response.data._id)

You could also utilize destructuring for a cleaner look:

const { _id } = response.data;
console.log(_id)

or even simpler:

const { data: { _id }} = response;
console.log(_id);

Answer 4

The _id attribute can be found within the data section:

const response = {
    "token":"sometoken.value",
    "data": {
       "_id":"8cd0362c0",
       "phone":"555-4343"
     }
};
console.log(response.data._id)

You could also utilize destructuring for a cleaner look:

const { _id } = response.data;
console.log(_id)

or even simpler:

const { data: { _id }} = response;
console.log(_id);

Answer 5

Answer №3

After some guidance from @jonsharpe, I realized that the solution was to first use JSON.parse on the string. By doing this, I was able to obtain the necessary value for "_id":

retrieveId() {
    if (this.authenticationService.isAuthenticated()) {
        const currentUserInfo = JSON.parse(sessionStorage.getItem('currentUser'));
        console.log(currentUserInfo.data._id);
    }
}

Answer 6

After some guidance from @jonsharpe, I realized that the solution was to first use JSON.parse on the string. By doing this, I was able to obtain the necessary value for "_id":

retrieveId() {
    if (this.authenticationService.isAuthenticated()) {
        const currentUserInfo = JSON.parse(sessionStorage.getItem('currentUser'));
        console.log(currentUserInfo.data._id);
    }
}

Answer 7

Answer №4

It seems like the string you are dealing with is in JSON format. To work with it, you will need to parse it into an object using JSON.parse() for JavaScript, or $.parseJSON() if you are using jQuery. Your code should now look something like this:

var user ='{"token":"sometoken.value","data":{"_id":"8cd0362c0", "phone":"555-4343"}}';
var k = JSON.parse(user);
alert(k.data._id);

You can find a working example at this Fiddle link. Thank you!

Answer 8

It seems like the string you are dealing with is in JSON format. To work with it, you will need to parse it into an object using JSON.parse() for JavaScript, or $.parseJSON() if you are using jQuery. Your code should now look something like this:

var user ='{"token":"sometoken.value","data":{"_id":"8cd0362c0", "phone":"555-4343"}}';
var k = JSON.parse(user);
alert(k.data._id);

You can find a working example at this Fiddle link. Thank you!

Extracting the Hidden Gems in a Nested Object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing a Function Triggered by Clicking Text in Angular 8

Searching and adding new elements to a sorted array of objects using binary insertion algorithm

What is the best way to ensure that empty strings are not included in the length of my array?

What is the best method for altering a route in React while utilizing Typescript?

The output is: [object of type HTMLSpanElement]

Converting a JavaScript List object to a JSON format

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

Navigating between interfaces without the need to constantly refresh or reload

Attempt to retrieve node information using the useStaticQuery method in Gatsby

The Discord.js Avatar command does not support mentioning users

An error was returned by Ajax when attempting to make the ajax call

Steps for crafting a killer soundtrack with ReactJS using lists

Is there a method to introduce a line break for each piece of data that is shown?

Customize the label of the model in AngularStrap's typeahead ng-options to display something

Add values to each entry in a subarray

24-hour flatpickr timepicker

Tips for converting an asynchronous process to operate as a synchronous process

Discovering the data type in Typescript through the use of Generics

Struggling to Keep Track of Namespaces within an Array

Guide to uploading a recorded audio file (Blob) to a server using ReactJS