API Returns Json Object with ID - IONIC 5 and Angular

Question

I’m working with an API that returns a JSON with a JSON object inside. Example:

{"authorized":true,"status":200,"foundmatch":true,"requested":"baiier",
"players": {
        "9bd44bde-9c48-48ae-9c2b-4e11e4b16083": {
            "profile": {
                "p_id": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                "p_name": "BaIIer",
                "p_user": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                "p_platform": "uplay",
                "verified": true
            },

I need to access these objects that are inside the player object, but the first object that it returns is an ID or is different for each type of query, and I’m not able to access this object. My service:

obterNickname(nickname: string){
    let url = 'https://r6.apitab.com/search/uplay/' + nickname;
    return this.http.get(url).toPromise();
  } 

My return:

nickname : string = "";
NicknameResult : any = {ranked:'', status:'', idNick:''};

constructor(private r6Service : R6Service) {}

  consultarNickname() {
    this.r6Service.obterNickname(this.nickname)
    .then((json) =>{
      this.NicknameResult = (json);
      this.IdResult = (this.NicknameResult.players)
      console.log(json)
    }) 
    .catch((erro) => {
      console.log(erro);
    });
  }

My html:

<ion-item>
    <ion-label position="stacked">Nickname:
      <ion-input [(ngModel)]="nickname"></ion-input>
      <ion-label></ion-label>
    </ion-label>  
  </ion-item>
  <ion-item>
    <ion-button expand="block" (click)="consultarNickname()">
      Consultar
    </ion-button>
  </ion-item>
  <ion-item>
    <p>Nickname: </p>
    {{NicknameResult.requested}}
  </ion-item>
  <ion-item>
    <p>Ranked: </p>
    {{NicknameResult.players}}
  </ion-item>

Answer 1

Hello, Igor!

To reach the object players you can make to search for parts of the object you recovered before.

As a suggestion I did so:

let obj = {
            "authorized":true,
            "status":200,
            "foundmatch":true,
            "requested":"baiier",
            "players": {
                    "9bd44bde-9c48-48ae-9c2b-4e11e4b16083": {
                        "profile": {
                            "p_id": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                            "p_name": "BaIIer",
                            "p_user": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                            "p_platform": "uplay",
                            "verified": true
                        }
                    }
            }
        }

As you already know that the captured object already has the attribute players you can read its attributes

let obj1 =  Object.keys(obj.players)
//Vai retornar assim [ '9bd44bde-9c48-48ae-9c2b-4e11e4b16083' ] 
let obj2 = obj1[0]

After that you have access to the content of the value 9bd44bde-9c48-48ae-9c2b-4e11e4b16083 thus:

obj.players[obj2]

let obj = {
            "authorized":true,
            "status":200,
            "foundmatch":true,
            "requested":"baiier",
            "players": {
                    "9bd44bde-9c48-48ae-9c2b-4e11e4b16083": {
                        "profile": {
                            "p_id": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                            "p_name": "BaIIer",
                            "p_user": "9bd44bde-9c48-48ae-9c2b-4e11e4b16083",
                            "p_platform": "uplay",
                            "verified": true
                        }
                    }
            }
        }

let obj1 =  Object.keys(obj.players)
console.log('Obj1', obj1);
let obj2 = obj1[0]



console.log( 'atributos', obj.players[obj2] );

I hope it helps!