CODEWITHSUNDEEP
arraysangularhttptypescriptangular-promise
Алекса Јевтић
Алекса Јевтић

Reputation: 547

Making an array of objects from returned type of http request Promise<Response>

I have a service which requests GET request from API server and returns json which i converted to Promise , here's the code for service 

import { Injectable } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { HttpModule, Http } from "@angular/http";
import { Osoba } from "./osoba";
import "rxjs/add/observable/of";
import { Response } from "@angular/http/src/static_response";

@Injectable()
export class OsobaService {
  constructor(private http: Http) {}
  public getOsobe(): Promise<any> {
    return this.http.get("http://localhost:62066/api/values").toPromise();
  }
}

Then i imported that service in order to list the data from that promise into unordered list 

import { Component, OnInit } from "@angular/core";
import { Osoba } from "../osoba";
import { OsobaService } from "../osoba.service";
import "rxjs/add/operator/toPromise";

@Component({
  selector: "app-table-view",
  templateUrl: "./table-view.component.html",
  styleUrls: ["./table-view.component.css"]
})
export class TableViewComponent implements OnInit {
  constructor(private osobaService: OsobaService) {}

  ngOnInit() {
    var osobe = this.osobaService.getOsobe();
    console.log(osobe);
  }
}

here is the log for osobe

ZoneAwarePromise {zone_symbol__state: null, __zone_symbol__value: Array(0)} __zone_symbol__state : true __zone_symbol__value : Response {_body: "[{"osobaID":1,"ime":"Aleksa ","prezime":"Jevtic…","prezime":"Stevanovic","jmbg":"2504996854112"}]", status: 200, ok: true, statusText: "OK", headers: Headers, …} __proto : Object

I tried listing objects using ngFor but i didn't get any respond on html page 

<ul><li *ngFor="let osoba of osobe">
{{osoba.ID}} {{osoba.ime}}
</li>
</ul>

How would i create an Array from Promise ? Or at least store data from Promise to list ? Sorry for ugly log code i'm not sure how would i format it .

Upvotes: 0

Views: 4522

Answers (3)

Kishan
Kishan

Reputation: 793

You have to add then and catch in your service function call like : 

   this.osobaService.getOsobe().then((response) => {console.log(response);}).catch((error) => {console.log(error); });

Upvotes: 0

mickaelw
mickaelw

Reputation: 1513

It's normal you must your API with .json():

import "rxjs/add/observable/map"; //<-- add this import


@Injectable()
export class OsobaService {
  constructor(private http: Http) {}
  public getOsobe(): Promise<any> {
    return this.http.get("http://localhost:62066/api/values")
      .map(res => res.json()) //<-- here 
      .toPromise();
  }
}

This method return the body of the response.

Check the .ts too, you have a localy variable. It's not accesible from the html:

export class TableViewComponent implements OnInit {
  osobe: Promise<any> //<-- add

  constructor(private osobaService: OsobaService) {}

  ngOnInit() {
    this.osobe = this.osobaService.getOsobe(); //<-- update
  }
}

Moreover, I think your html code is wrong if you do var osobe = this.osobaService.getOsobe();

Because, you assign an observable but in your html you don't use osobe as an observable.

I must add the async pipe too:

<ul>
   <li *ngFor="let osoba of osobe | async">{{osoba.osobaID}} {{osoba.ime}}</li>
</ul>

Upvotes: 1

Akash Agrawal
Akash Agrawal

Reputation: 2299

Try this:

return this.http.get("http://localhost:62066/api/values").map(res => res.json());

Upvotes: 0

Related Questions