Can't get deeper into the response data object in subscribe's callback function. Why?

Question

I'm fetching data from RandomUser api with Angular HttpClient. I've created a method in a service calling GET, mapping and returning a Observable. Then I subscribe on this method in a component importing this service and in subscribe's callback I am trying to store the response data in a local variable. The problem is I can't get "deeper" into this response object than:

this.randomUser.getNew().subscribe(data => {
      this.userData = data[0];
    })

If I'm trying to reach any further element of that response object, and log it to console it I get "undefined". To be precise I cant reference to, for example:

this.randomUser.getNew().subscribe(data => {
      this.userData = data[0].name.first;
    })

If I store the "data[0]" in a variable first I can get into these unreachable properties. What is the reason of it? Please, help. Let me know what important piece of fundamental JS (or Angular) knowledge I'm not aware of. As far as I know I should be able to do what I am trying to do:)

service looks like these

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RandomUserService {
  url: string = " https://randomuser.me/api/ "

  constructor(private http: HttpClient) { }

  public getNew(): Observable<any> {
    return this.http.get(this.url)
      .pipe(map(responseData => {
        const returnDataArray = [];
        for (const key in responseData) {
          returnDataArray.push(responseData[key])
        }
        return returnDataArray;
      }))
  }

}

component looks like these:

import { Component, OnInit } from '@angular/core';
import { RandomUserService } from 'src/app/shared/random-user.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'app-single-character',
  templateUrl: './single-character.component.html',
  styleUrls: ['./single-character.component.scss']
})
export class SingleCharacterComponent implements OnInit {
  userData: object;
  fname: string;
  constructor(private randomUser: RandomUserService) { 
    this.randomUser.getNew().subscribe(data => {
      this.userData = data[0];
    })
  }
  ngOnInit(): void { 
  }
}

Answer 1

You are not parsing the returned data correctly in getNew() .

The returned data looks like this:

So you need to access the user data like:

this.randomUser.getNew().subscribe(data => {
      this.userData = data[0][0];  // note 2nd [0]
    })

or for first name:

this.randomUser.getNew().subscribe(data => {
      this.userData = data[0][0].name.first;
    })

See stackblitz here: https://stackblitz.com/edit/so-http-parse?file=src/app/app.component.ts