loop through the response from a HTTP request Angular

Question

I'm struggling with this, I'm making a request and I'm receiving an object, I can't iterate it, so i don't know How I can accomplish, this is my code:

I have a Interface called CountryCode

my services file looks like this:

```import { OperatorCode } from './../../models/catalogs/OperatorCode';
import { CountryCode } from '../../models/catalogs/CountryCode';
import { environment } from './../../../environments/environment';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DatosInicialesService {
  baseUrl = environment.baseUrl;

  constructor(private http: HttpClient) {}
  getCountryCode(): Observable {
    return this.http.get(
      `${this.baseUrl}/api/Catalog/CountryCode`
    );
  }```

and my component file looks like this:

    import { CountryCode } from './../../models/catalogs/CountryCode';
    import { DatosInicialesService } from './../../services/actualizacion-de-datos/datos-iniciales.service';
    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Component({
      selector: 'app-datos-iniciales',
      templateUrl: './datos-iniciales.component.html',
      styleUrls: ['./datos-iniciales.component.scss'],
    })
    export class DatosInicialesComponent implements OnInit {
      countryCode = [];
      operatorCode = [];
      constructor(
        private router: Router,
        private datosInicialesService: DatosInicialesService
      ) {}
    
      onSubmit(event: any) {
        event.preventDefault();
        this.router.navigate(['actualizacion-de-datos/mas-sobre-ti']);
      }
    
      ngOnInit(): void {
        this.datosInicialesService.getCountryCode().subscribe((data) => {
          this.countryCode = data
          console.log(data);
        });
    
    }```

and this is what it shows in the console:

    {Data: Array(252), Status: {…}, Info: {…}}
Data: (252) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, 
...

Info: {Datetime: "2021-02-24T20:23:07.3906084+00:00", AcceptedUser: true}
Status: {Code: 200, Message: "Ok"}

How can I loop through that response and get the name and the description of that Data response, I'm pretty new to web development so that's why this question might be mocked. I have tried in different ways to loop that object but I can't find the way to access to those properties I need.

Thanks in advanced if somene can help me with that

user_7237884 · Answer

ngOnInit(): void {
        this.datosInicialesService.getCountryCode().subscribe((data) => {
          this.countryCode = data
          data[0].Data.forEach( (element) => {
            console.log(element.name);
            console.log(element.description);
            });
        });

user_11745572 · Answer

This is my CountryCode interface : import { Status } from '../status.base'; import { Info } from '../info.base';

  Data: {
    idNationality: string;
    code: string;
    name: string;
    description: string;
  }[];
  Status: Status;
  Info: Info;
}`

loop through the response from a HTTP request Angular

2 Answers