Load data from json api Angular Typescript

Question

I'm working with an api json to load a list of countries, then a list of states then a list of the cities of that state and country. Thing is, I'm strugling with the second call I make in the api. First I load a list of continents. Then I go for the 'lists' of the countries. Problem is since I have to loop on the continents in order to get the countries, I have to concatenate or add the multiple lists as one. And I don't know how to do it. Here is my code so far:

pegPaises2(): void {

    let count = 0;
    console.log('nóis na fita');

    this.httpp.get('http://www.geonames.org/childrenJSON?geonameId=6295630')
    .subscribe((resContinents: Response) => {

        resContinents.json().geonames.forEach(element => {
          this.httpp.get(`http://www.geonames.org/childrenJSON?geonameId=${element.geonameId}`)
            .subscribe((resCountries: Response) => {

              resCountries.json().geonames.forEach(elementt => {

                count =  count + 1;

                const Country = new COUNTRY;
                Country.geonameId = elementt.geonameId;
                Country.name = elementt.name;


                console.log(count, Country);

              //  console.log(count, elementt.geonameId, elementt.name);

              });
            });
        });
    });
      //  return  ;
}

I think I could have an observable or an array. But tried using push and didn't find any example that I could understand(beginner here).

LLai · Accepted Answer · 2018-01-19 05:18:13Z

1

You can chain your api calls (continents + countries) together with the flatMap operator and use the forkJoin operator to make multiple api calls (countries) in parallel.

pegPaises2(): void {
  // this is used to store the continent response so we can use it within the subscribe
  let continentResponse; 

  this.http.get('http://www.geonames.org/childrenJSON?geonameId=6295630')
    .flatMap((resContinents: Response) => {
        continentResponse = resContinents.json();
        // this builds out an array of all the country apis you want to call in parallel
        let countryObservables = continentResponse.geonames.map(element => {
          return this.http.get(`http://www.geonames.org/childrenJSON?geonameId=${element.geonameId}`);
        });
        // forkJoin is used to call all country apis in parallel
        return Observable.forkJoin(...countryObservables);
    })
    .subscribe(res => {
      // res is an array of api responses. something like
      // [country0Response, country1Response, country2Response, etc]
      // now you can use continentResponse + res to build out a continent to country object
    });
}

So what is happening here:

continent api fires
use the continent response to determine what country apis need to be called in parallel.
country apis are fired in parallel.
Once all the country apis complete, you can now compile your continent + country data.

answered Jan 19, 2018 at 5:18

LLai

13.5k3 gold badges45 silver badges46 bronze badges

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

10 Comments

DValdir Martins Over a year ago

I can see the data on console. (Both array and observable). But how could I extract the data and create the list of countries? Should I do a loop on the 7 continent objects and get the countries? Then, how would I assign the complete list to a combobox for example?

LLai Over a year ago

@DValdirMartins It's hard to say without the data and what format you are trying to achieve, but yeah I would loop through the 7 continent objects and assign the countries accordingly.

DValdir Martins Over a year ago

Well, I managed to loop trought the continent arrays and get the lists of countries. So, how could I concatenate this data into only one array or collection? Then I would like to insert it in a combobox or something. ibb.co/jw46zG

LLai Over a year ago

@DValdirMartins mmm I'm unsure what each array means in your picture. The first array is the first api call?

DValdir Martins Over a year ago

I ended up doing like this: ibb.co/jYem1w I could create the country array. Very thanks for all the help. It made me get it!

|

Collectives™ on Stack Overflow

Load data from json api Angular Typescript

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related