Response of Http Api call promise is undefined - Angular 2

Question

I have created an api in WebAPI as below.

public HttpResponseMessage Get() {

            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(JsonConvert.SerializeObject("Hello World"), Encoding.UTF8, "application/json");
            return response;
        }

I am trying to call it from Angular as below

Service.ts

@Injectable()
export class DemoService {

     constructor(private http:Http){}

     GetHttpData(){

        return this.http.get('http://localhost:54037/api/home')
        .map((res:Response)=>res.json());
     }

Component:

export class AppComponent implements OnInit  { 

  data2: String;
  constructor(private s: DemoService){} 

  ngOnInit(){

    this.s.GetHttpData().subscribe(data=>this.data2=data);
    console.log("Http call  completed: "+this.data2);

}

On running the application, I get output:

Http call completed: undefined

Can someone help with this?

Thanks

Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — AT82, Jul 26 '17 at 13:48
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, Jul 26 '17 at 13:53
See the duplicates, that is expected behavior with your code. Put the `console.log` statement *inside* the `subscribe` callback. Read through the suggested duplicates so you understand the fundamentals of asynchronous code in javascript/typescript. — Igor, Jul 26 '17 at 13:55

Marian König · Answer 1 · 2017-07-27T08:19:59.773

1

Try to work with a simple promise here.

In Service.ts (DemoService)

 GetHttpData() {

        return new Promise(resolve => {

            this.http.get('http://localhost:54037/api/home')
                .map(res => res.json())
                .subscribe(data => {
            resolve(data);
        });
    }

And in Component:

this.s.GetHttpData()
        .then(data => { 
             console.log("Http call  completed: "+data);
});

edited Jul 27 '17 at 08:19

answered Jul 26 '17 at 14:00

Marian König

704
6
11

https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled – AT82 Jul 26 '17 at 14:42

score 1 · Accepted Answer · edited Jul 27 '17 at 15:41

1

Put the console.log inside the data function.

Could you try like this.

export class AppComponent implements OnInit  { 

  data2: String;
  constructor(private s: DemoService){} 

  ngOnInit(){

    this.s.GetHttpData().subscribe(data=>{
        this.data2=data;
        console.log("Http call  completed: "+this.data2)
    });

}

edited Jul 27 '17 at 15:41

georgeawg

48,608
13
72
95

answered Jul 26 '17 at 14:21

k11k2

2,036
2
22
36

You should read up on what to do with duplicate questions... https://meta.stackexchange.com/questions/10841/how-should-duplicate-questions-be-handled – AT82 Jul 26 '17 at 14:41
@AJT_82 While I'm answering there is no duplicate flag may be some network issues. – k11k2 Jul 26 '17 at 14:51

Response of Http Api call promise is undefined - Angular 2

2 Answers2

Linked