无法访问打字稿中的嵌套JSON数据-Angular6

Question

I am getting the response as a JSON array in the following form :

{
  "response": {
    "refreshToken": "sometoken",
    "token": "sometoken",
    "user": {
      "active": 12,
      "id": 5,
      "name": "abc",
      "password": "def"
    }
  }
}

Now I want to access name and password in typescript.

this._scaffolder.AuthGuard.authenticate(JSON.stringify(requestBody))
            .subscribe(response => {
                this._logger.info(response);
                if (response && response.valid) {
                    console.log(response.user.name);
                    this._scaffolder.Cluster.API.silentlyNavigate('model');
                } else {
                    this.areCredsInvalid = true;
                }
            });

I have tried this where I try to access the name field.

But I am shown an error that : Property user does not exist on the type response. The response object is as shown below, where the user is an object of UserModel

response: {
    valid: boolean;
    response: PlatformServiceProxy.ErrorResponse | {
        token: string;
        refreshToken: string;
        user: PlatformServiceProxy.UserModel;
};

Answer 1

You have to parse it like that :

this._scaffolder.AuthGuard.authenticate(JSON.stringify(requestBody))
            .subscribe(response => {
                this._logger.info(response);
                if (response && response.valid) {
                    let userDict = response['response']['user']

                    console.log(userDict.name); // for accessing name as its in the form of dictionary (key-value pair)
                    console.log(userDict.password); // for accessing password

                    this._scaffolder.Cluster.API.silentlyNavigate('model');
                } else {
                    this.areCredsInvalid = true;
                }
            });

Answer 2

Since in the response, user resides inside anothet response object, you have to add it too.

Try:

console.log(response.response.user.name);

Answer 3

Hope you're doing great!!!

Below is the solution you can use with 2 scenarios added for your help. I am doing this in Pure RXJs so that any other JS Framework user with this issue can be benefited.

Scenario 1: If the entire object is coming as a response with other request/response headers, then use: -

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

ajax('https://my-json-server.typicode.com/nimpossible/json-server/db')
  .pipe(
  map(ajaxResponse => {
    const { response: { response: res } } = ajaxResponse; // ES6 Destructuring Used
    return res.user; // here 'res' is an alias used above
    })
 )
  .subscribe(mappedValue => {
    console.log(mappedValue.name);
    console.log(mappedValue.password);
  });

Scenario 2: If only the response object is coming directly as a response with no other request headers then use: -

import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

ajax.getJSON('https://my-json-server.typicode.com/nimpossible/json-server/db')
  .pipe(
  map(ajaxResponse => {
      const { response: res } = ajaxResponse; // ES6 Destructuring Used
      return res.user; // here 'res' is an alias used above
    })
  )
  .subscribe(mappedValue => {
    console.log(mappedValue.name);
    console.log(mappedValue.password);
  });

In your case, maybe Scenario 2 will work, considering the response object you have provided with the question.

Hope this helps! Happy Coding! Cheers!!!