How do you call a web service that returns single JSON object in Angular 2?

Question

Trying to call a webservice from Angular 2 that returns a single Json object:

{
   "fullDisplayName": "test",
   "result": "SUCCESS"
}

Below are the code snippets for my route:

Service

getJsonObject () {
    return this.http.get(this.url)
                    .map(res => <jsonObject> res.json())
                    .do(jsonObject=> console.log(jsonObject))
                    .catch(this.handleError);
}

Component

getJsonObject() {
   console.log('BEFORE')
   this.service.getJsonObject()
      .subscribe(
          jsonObject=> this.jsonObject = jsonObject,
          error =>  this.errorMessage = <any>error);
          console.log(this.jsonObject)
          console.log("AFTER")
 }

All that I get is a undefined object but I can see the JSON in the console log in chrome. The funny thing is I place a log in the component before and after the call, both those logs are displayed before the JSON found is displayed in log, making it look like it's somehow trying to map the object before the web service returns the data.

Console Log

 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
 BEFORE
 undefined
 AFTER
 Object {fullDisplayName: "test", result: "SUCCESS"}

Any help is greatly appreciated.

What is `jsonObject` or how does it look like? Looks like a dup of http://stackoverflow.com/questions/22875636/how-do-i-cast-a-json-object-to-a-typescript-class — Günter Zöchbauer, May 10 '16 at 10:20
@GünterZöchbauer The jsonObject looks like this. `export class JsonObject{ constructor( public fullDisplayName:string, public result:string) { } }` — Philip Harper, May 10 '16 at 10:22

score 1 · Accepted Answer · answered May 10 '16 at 10:25

1

     console.log(this.jsonObject)
     console.log("AFTER")

is executed before the request to this.url is even sent to the server. Observable is async and execution is enqueued into the event queue and when the response arrives the callback you passed to subscribe(...) is executed.

This is what you actually need to do:

getJsonObject() {
   console.log('BEFORE')
   this.service.getJsonObject()
      .subscribe(
          jsonObject=> {
              this.jsonObject = jsonObject,
              console.log(this.jsonObject)
              console.log("AFTER")
          },
          error =>  this.errorMessage = <any>error);
 }

answered May 10 '16 at 10:25

Günter Zöchbauer

623,577
216
2,003
1,567

Ah I see, that makes sense. However it is still not showing in my HTML. {{ jsonObject.result }} This outputs no data even though the log is showing the object as being populated. – Philip Harper May 10 '16 at 10:33
1

Is it printing to the console? Do you get an error in the console? I guess you need `{{jsonObject?.result }}` See also the link in my comment below your question. – Günter Zöchbauer May 10 '16 at 10:36
2

That was it. It just needed the question mark! I have created used web services before but they have always returned arrays which have not needed the ? to be referenced. Thanks you for your help. – Philip Harper May 10 '16 at 10:40

How do you call a web service that returns single JSON object in Angular 2?

1 Answers1