Angular2 HttpClient probleem

[Joshuatree]

Hoe kan ik van een json response alleen de objecten destilleren die ik wil hebben.
Op moment zit ik heel erg te

Bijvoorbeeld ik wil alleen de landen hebben.

De service : http://services.groupkt.com/country/get/all
Returned:
{
"RestResponse" : {
"messages" : [ "More webservices are available at http://www.groupkt.com/post/f2129b88/services.htm", "Total [249] records found." ],
"result" : [ {
"name" : "Afghanistan",
"alpha2_code" : "AF",
"alpha3_code" : "AFG"
}, {
"name" : "Åland Islands",
"alpha2_code" : "AX",
"alpha3_code" : "ALA"
}, {

...
Mijn code:

public countries$: Observable<any[]>;

ngOnInit() {

this.countries$ = this.http.get<any[]>(`http://services.groupkt.com/country/get/all`)
.map(data => _.values(data["RestResponse"]))
.do(console.log);

}

Zo heb ik al heel wat dingen geprobeerd maar niet het juiste gevonden.
Ik weet dat de omschrijving wat kort is maar ik ben bang dat het antwoord heel simpel is.

Mocht dit niet zo zijn dan zal ik de omschrijving uitbreiden.

Opgelost:
this.countries$ = this.http
.get("http://services.groupkt.com/country/get/all")
.map((response: HttpResponse<any>) =>
_.values(response["RestResponse"]["result"]));

[ Voor 8% gewijzigd door Joshuatree op 15-08-2017 15:04 . Reden: Opgelost ]

[DixxyJS]

code:

import {Http} from "../../../node_modules/@angular/http/src/http";
import 'rxjs/add/operator/map';

//aanroepen in de klasse waar je de data wilt hebben
this.getData().subscribe(data => console.log(data.RestResponse.result));

getData() {
    return this.http.get("http://services.groupkt.com/country/get/all")
    .map(response => response.json())
    .catch(blabla...);
}

Werkt wel
Goed is om een service aan te maken en daar deze methode in te zetten die de http.get returnt.
Waar je de data aanroept moet je wel subscriben om de stream te openen.
Op angular.io staat zeeeer uitgebreide documentatie, wellicht is het verstandig om de tutorials eens te volgen, die zijn meteen praktisch toe te passen.

[ Voor 7% gewijzigd door DixxyJS op 15-08-2017 15:15 . Reden: code tags om de code geplaatst ]

[Hydra]

We hebben [code] tags he; geldt voor jullie beiden.

Je doet het overigens nog steeds verkeerd. Wat je doet is erg ranzig. Angular heeft een prima tutorial over hoe je met Promises werkt. Om het asynchrone heen werken gaat op de lange termijn alleen maar problemen opleveren.

[q-enf0rcer.1]

Hydra schreef op dinsdag 15 augustus 2017 @ 15:08:
We hebben [code] tags he; geldt voor jullie beiden.

Je doet het overigens nog steeds verkeerd. Wat je doet is erg ranzig. Angular heeft een prima tutorial over hoe je met Promises werkt. Om het asynchrone heen werken gaat op de lange termijn alleen maar problemen opleveren.

Voorbeeld van Dixie is gewoon goed hoor, dit is een Observable, geen Promise Er bestaat wel een mogelijkheid om een Observable om te zetten naar een Promise middels toPromise().

[ Voor 9% gewijzigd door q-enf0rcer.1 op 15-08-2017 16:00 ]

[Hydra]

q-enf0rcer.1 schreef op dinsdag 15 augustus 2017 @ 15:58:

Voorbeeld van Dixie is gewoon goed hoor

Ik regeerde op de TS.

[DixxyJS]

Hydra schreef op dinsdag 15 augustus 2017 @ 16:03:
[...]


Ik regeerde op de TS.

Ik zat nog even te twijfelen

[q-enf0rcer.1]

Hydra schreef op dinsdag 15 augustus 2017 @ 16:03:
[...]


Ik regeerde op de TS.

Neemt niet weg dat je opmerking bot was terwijl dat je zelf kennelijk weinig kaas van de materie hebt gegeten. Want er is nergens in dit topic een promise te bekennen, en daarnaast is dat ook een vrij onlogische keuze om aan te raden aangezien angular out of the box goede ondersteuning heeft voor Observables. De http service is hier uiteraard een voorbeeld van.

[Hydra]

q-enf0rcer.1 schreef op dinsdag 15 augustus 2017 @ 23:45:
Neemt niet weg dat je opmerking bot was terwijl dat je zelf kennelijk weinig kaas van de materie hebt gegeten.

Klopt, ik ben zelf kwa Angular 4 net in de fase dat ik de tutorials doorwerk en ik had even de shift naar observables (waar je dan topromise op aanroept) over het hoofd gezien. "Weinig kaas" vind ik dan nogal overdreven; de essentie blijft: hij zit met de hand uit dat observable object het result te peuteren. Dat hoort niet.

En daarnaast: mijn opmerking over dat mensen code tags dienen te gebruiken staat hier in de regels. Als jij het 'bot' vindt dat ik mensen daarop wijs, tja. Dan is dat maar bot.

[Joshuatree]

Met ranzig bedoel je de query die je gebruikt om in je json de juiste gegevens te halen?

Maar ik zou niet weten hoe je met een eenvoudig model zoiets als onderstaand kunt genereren.
Ik denk dat ik wel een interface kan schrijven en dan een mapping naar een Country[]

Maar elke hint is welkom en helaas met alleen de opmerking ranzig kom ik niet veel verder.
Wel bedankt voor je uitleg daar heb ik wat meer aan :-)

TypeScript:

this.countries$ = this.http.get<Country[]>(`http://services.groupkt.com/country/get/all`)

[Hydra]

Joshuatree schreef op maandag 21 augustus 2017 @ 15:32:
Maar elke hint is welkom en helaas met alleen de opmerking ranzig kom ik niet veel verder.

Well ff al m'n replies lezen!

Hydra schreef op dinsdag 15 augustus 2017 @ 15:08:
Je doet het overigens nog steeds verkeerd. Wat je doet is erg ranzig. Angular heeft een prima tutorial over hoe je met Promises werkt. Om het asynchrone heen werken gaat op de lange termijn alleen maar problemen opleveren.

Angular (en de meeste JS frameworks) werken met callbacks (/promises/observables, in essentie allemaal hetzelfde). Dat betekent dat jij een functie meegeeft die aangeroepen wordt als het resultaat beschikbaar is. Dit is omdat JavaScript in de browser in essentie een enkele thread is die events afhandelt. Een voorbeeld uit een applicatie van mij:

get user call in een service:

JavaScript:

  get(): Promise<User> {
    const url = `${this.baseUrl}/${this.userUrl}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response as User)
      .catch(this.handleError);
  }

het gebruik daarvan in een component:

JavaScript:

    this.userService.get()
        .then(user => {
          this.user = user;
        });

Dit is het hoe. Het waarom staat goed uitgelegd in de officiele tutorial.

[Joshuatree]

@DixxyJS tx voor je voorbeeld!

Okay dan zou het als Observable toch zo gaan?
Waar bij de _ lodash is.

TypeScript:

courses$:Observable<Course[]>;

 this.courses$ = this.http
            .get<Course[]>("/courses.json")
            .map(data => _.values(data))
            .do(console.log);

]

en als de resultset volledig mapt krijg je toch dit?

TypeScript:

 this.courses$ = this.http.get<Course[]>("/courses.json");

]

[ Voor 3% gewijzigd door Joshuatree op 22-08-2017 08:42 ]

[GrooV]

Joshuatree schreef op dinsdag 22 augustus 2017 @ 04:04:
@DixxyJS tx voor je voorbeeld!

Okay dan zou het als Observable toch zo gaan?
Waar bij de _ lodash is.

TypeScript:

courses$:Observable<Course[]>;

 this.courses$ = this.http
            .get<Course[]>("/courses.json")
            .map(data => _.values(data))
            .do(console.log);

]

en als de resultset volledig mapt krijg je toch dit?

TypeScript:

 this.courses$ = this.http.get<Course[]>("/courses.json");

]

Nee zo wordt de Observable nooit aangeroepen, de http get is namelijk een cold observable en die gaan pas wat doen als er een subscriber is

[Joshuatree]

TypeScript:

import { HttpClient } from "@angular/common/http";
...
countries$: Observable<any>;

ngOnInit() {
        this.courses$ = this.demoDataService.getCourses();
  }

/** DemoService */
  getCourses(): Observable<any[]> {
    return this.http
      .get("https://angular-http-guide.firebaseio.com/courses.json")
      .map(data => _.values(data));
  }

In de view

HTML:

<p-dataTable [value]="courses$ | async" 
  [rows]="10" 
  [paginator]="true" 
  [pageLinks]="3" 
  [rowsPerPageOptions]="[5,10,20]">
    <p-header>FireBase content</p-header>
    <p-column [filter]="true" field="description" header="Description"></p-column>
    <p-column field="longDescription" header="LongDescription"></p-column>
</p-dataTable>

Dan zorgt de async pipe ervoor dat er een resultaat is.


Dit is toch "de" manier ??

[DixxyJS]

Joshuatree schreef op donderdag 24 augustus 2017 @ 09:59:

TypeScript:

import { HttpClient } from "@angular/common/http";
...
countries$: Observable<any>;

ngOnInit() {
        this.courses$ = this.demoDataService.getCourses();
  }

/** DemoService */
  getCourses(): Observable<any[]> {
    return this.http
      .get("https://angular-http-guide.firebaseio.com/courses.json")
      .map(data => _.values(data));
  }

In de view

HTML:

<p-dataTable [value]="courses$ | async" 
  [rows]="10" 
  [paginator]="true" 
  [pageLinks]="3" 
  [rowsPerPageOptions]="[5,10,20]">
    <p-header>FireBase content</p-header>
    <p-column [filter]="true" field="description" header="Description"></p-column>
    <p-column field="longDescription" header="LongDescription"></p-column>
</p-dataTable>

Dan zorgt de async pipe ervoor dat er een resultaat is.


Dit is toch "de" manier ??

Waar inject je de service dan en waar subscribe je dat op de service methode?
En waarom zou je een attribuut met die data in je service willen?
Dat attribuut moet je in de klasse zetten waar je de view hebt gekoppeld.

[ Voor 9% gewijzigd door DixxyJS op 24-08-2017 15:33 ]

[Joshuatree]

Ik heb mijn voorbeeld hiervandaan..

http://blog.angular-university.io/angular-http/

Ik heb alleen de httpclient in een service(injectable) gezet.

zodat je dit hebt

code:

 this.courses$ = this.demoServices.getcourses();

ipv

code:

 this.courses$ = this.http
            .get<Course[]>("/courses.json")
            .map(data => _.values(data))
            .do(console.log);

[DixxyJS]

Maar dan moet je daar wel op subscriben.

code:

private courses;

constructor(private courseService: CourseService){}

getCourses(): void {
  this.courceService.getCourses.subscribe(
    data => this.courses = data,
    error => //handle error
}

[Joshuatree]

Bedankt voor de response. Voor mij is de materie
redelijk nieuw dus ik leer steeds weer nieuwe dingen

ontopic:
Ook zonder een Subscribe wordt de tabel (eenmalig) gevuld.

code:

ngOnInit() {
    this.courses$ = this.demoDataService.getCourses();
}

code:

  /** Courses via FireBase */
  getCourses(): Observable<any[]> {
    return this.http
      .get("https://angular-http-guide.firebaseio.com/courses.json")
      .map(data => _.values(data));
  }

ps: voorlopig kan ik niet reageren....