[Fixed] How can I obtain a JSON from a restful API in Angular?

Issue

Im learning angular, trying to consume the JSON info from this restfullAPI:

https://restcountries.eu/rest/v2/callingcode/{callingcode}

It shows a list of countries and its information…

There are 300 countries in the REST list…

I need to navigate througt each "{callingcode}" but some of them return error 404 cause there is no information in it…

How can i hande this error and keep the for loop going ?

Also i dont know if the arrow function sintax whitin the subscribe method is correct

This is what i have

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Pais } from 'src/app/entities/pais';


@Component({
selector: 'app-connector',
templateUrl: './connector.component.html',
styleUrls: ['./connector.component.css']
})

export class ConnectorComponent implements OnInit {

paises: Pais[] = [];

constructor(public http:HttpClient) { }

ngOnInit(): void {
this.getCountries();
}

getCountries(){
for(let i=0; i<=300; i++ ){ 
  
  return this.http.get<Pais[]>("https://restcountries.eu/rest/v2/callingcode" + i).subscribe(
    paises => {this.paises = paises
    console.log(this.paises)
    })
 }
}}

Solution

First of all

You need to push into paises the sum of 300 responses, your code are overwriting with the last.
And remove return!

   this.http.get<Pais[]>("https://restcountries.eu/rest/v2/callingcode" + i).subscribe(
        paises => {
          this.paises.push(paises)
          console.log(this.paises)
        },
        error => { console.error(error)
       });

I were you I would do this in a service so as to share data between components through DependencyInjection

Arrow function is good