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<CountryCode[]> {
    return this.http.get<CountryCode[]>(
      `${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

Yes sure. Data: { idNationality: string; code: string; name: string; description: string; }[]; Status: Status; Info: Info; }` — frescobar
– frescobar, Commented Feb 24, 2021 at 20:56

Panagiotis Bougioukos · Accepted Answer · 2021-02-24 21:23:01Z

2

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

edited Feb 24, 2021 at 21:23

answered Feb 24, 2021 at 21:09

Panagiotis Bougioukos

19.6k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

frescobar Over a year ago

It shows me an error. Property 'Data' does not exist on type 'CountryCode[]

Panagiotis Bougioukos Over a year ago

check edited answer if it solves your problem, you have something malformed there for sure

frescobar · Accepted Answer · 2021-02-24 20:50:57Z

0

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;
}`

answered Feb 24, 2021 at 20:50

frescobar

1251 silver badge6 bronze badges

2 Comments

Talha Akca Over a year ago

it throws error because it checks the type of variable and your interface doesn't has data property. It will compile because eventually it will compile. If you want to avoid the error, just add data to your interface

frescobar Over a year ago

what do you mean? I'm working with that structure of the interface because it already was used in othjer projects but the devloper who has worked with that before it not working here anymore

Collectives™ on Stack Overflow

loop through the response from a HTTP request Angular

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related