Data from web api not binding to view in Angular

Question

I have some data coming in from a web api, but the data is not binding to the view for some reason, I have a service for the api call and then I am injecting that into the component.ts file and into the html, so far I have:

The web api structure(rest) result in console

result: Array(1)
0:
active: "true"
activity_due: ""
additional_assignee_list: ""
approval: "not requested"
approval_history: "
etc etc

service.ts

getIncident(s_id, cId): Observable<any> {
    return this.http.get<any>(this.incidentApiUrl + "/" + s_id + "?customer_id=" + cId)
       .pipe(
         catchError(this.handleError)
       );
   }

componet.ts:

constructor(private service: nowService,
        private appComponent: AppComponent,
        private userService: UserService,
        private router: Router,
        private http: HttpClient,
        private route: ActivatedRoute
      ) {
        this.receivedUser = { firstname: '', email: '', lastname: '', name: '' }
        this.receivedIncident = { number: '', opened_at: '', description: '', short_description: ''}; this.receivedLocation = {city:null, country: null}
      }

      private getIncident() {
        this.service.getIncident(this.s_id, this.customer_id).subscribe((data) => {
          this.loading = true;
          console.log('Result - ', data);
          console.log('incident data is received');
          this.loading = true;
          this.receivedIncident = data.result;
          //this.service.getLocationsCustomer(this.receivedIncident.location.value).subscribe(location => {
            if (this.receivedIncident.location) {
              this.service.getLocations(this.receivedIncident.location.value).subscribe(location => {  
                  console.log('location --', location)

                  this.loading = false;
                  this.receivedLocation  = location.result;
              });
            } else {
              this.loading = false;
            }
        })
      }

html.binding.

<h2 class="text-secondary">Incident #{{receivedIncident.number}}</h2>

Might be something to do with the data structure in the web api?? any ideas?

I guess you are not getting object with property number from api right — Anusha_Mamidala
– Anusha_Mamidala, Commented Apr 8, 2019 at 10:30
there wont be any errors in the console but it wont print anything on screen... I guess u need to get the property from api there is no problem in angular — Anusha_Mamidala
– Anusha_Mamidala, Commented Apr 8, 2019 at 10:32
I have got the property in the api call.... in the question I have just put the structure of the api call not all fields thats why I have etc etc — Sole
– Sole, Commented Apr 8, 2019 at 10:32
Can you post the code in stackblitz with some dummy data so that i can help you out.. — Anusha_Mamidala
– Anusha_Mamidala, Commented Apr 8, 2019 at 10:35

Niraj · Accepted Answer · 2019-04-08 10:38:39Z

1

You have to write as below as per your json result structure.

this.receivedIncident = data.result[0];

or

 this.receivedIncident = data[0];

in getIncident() function as I have seen your result in array with all the properties.

answered Apr 8, 2019 at 10:38

Niraj

7937 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Data from web api not binding to view in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related