Access array in component after Http get

Question

I'm trying to access the array countriesList which I receive as a response in my Angular 4 component. The response contain details about countries like name, capital, population etc.

how do I get the length of array countriesList in my component.ts?

import { Component, OnInit } from '@angular/core';
import { Chart, Highcharts } from 'angular-highcharts';
import { CountriesserviceService } from '../countriesservice.service';

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

export class Graph1Component implements OnInit {

countriesList: any[];

constructor(private countriesService: CountriesserviceService) { }

ngOnInit() {
this.countriesService.getCountries().subscribe(countriesList => 
this.countriesList = countriesList.json() );

console.log(this.countriesList);
}
}

Show your `countriesService` code. Give us know if u have any errors in console. Also see how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) when you ask question here. — Arkej, Nov 09 '17 at 12:36
@Kash Can you share CountriesserviceService code in this question ? if you assign json() in services you don't need assign json() inside the subscribe method in angular component — Chandru, Nov 09 '17 at 13:26

br.julien · Answer 1 · 2017-11-10T12:50:43.553

0

Try this way :

ngOnInit() {
    this.countriesService.getCountries().subscribe(
        (res) => this.onSuccess(res.json, res.headers),
        (res) => this.onError(res.json)
    );
}

private onSuccess(data, headers) {
        this.countriesList = data;
    }
private onError(error) {
    console.log(error.toString());
}

edited Nov 10 '17 at 12:50

answered Nov 09 '17 at 12:43

br.julien

3,420
2
23
44

what is ResponseWrapper? how to declare it? – Kash If Nov 10 '17 at 09:06
Sorry, I edited my answer, it was only a class corresponding to an http response, but we don't need it – br.julien Nov 10 '17 at 12:51

mickaelw · Answer 2 · 2017-11-09T13:38:07.790

To get the array length, you can use the second way:

ngOnInit() {
  this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => {
         this.countriesList = countries
         console.log(this.countriesList.length)
      })
}

Be careful it's asynchronous code, so the console.log must be inside the subscribe. If it's outside, that's display the default value (O, null, [], undifined, ...)

--- Before post edit ---

You have two ways to display the result of getCountries

First:

You can affect directly your observable getCountries to your component's property:

ngOnInit() {
    this.countriesList$ = this.countriesService.getCountries().map( res => res.json())
}

And use the async pipe into the HTML angular component:

<ul>
  <li *ngFor="let country of countriesList$ | async">{{country.name}}</li>
</ul>

I use $ at the end of my property name, because it's a convention to add $ for a name of stream (observable) in typescript/rxjs

Second:

You can affect the result of your observable to your HTML component's property:

ngOnInit() {
   this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => this.countriesList = countries)
}

And in the component:

<ul>
  <li *ngFor="let country of countriesList">{{country.name}}</li>
</ul>

My examples are trivials, that's depend what does your getCountries method do

score 0 · Answer 3 · answered Nov 09 '17 at 13:22

Try like this :

export class Graph1Component implements OnInit {

    countriesList: Array<any> = [];

    constructor(private countriesService: CountriesserviceService) { }

    ngOnInit() {
        this.countriesService.getCountries().subscribe(countriesList => {
            this.countriesList = countriesList.json();
            console.log("countries length", this.countriesList, this.countriesList.length);
        });
    }
}

Access array in component after Http get

3 Answers3