how to bind response data in angular using http Client using thrid party api

Question

how to bind response data in angular using http Client using thrid party api.

get response data show in console but not able to bind train route data in my UI.

I have uploaded my code to github. please have a look of my code. https://github.com/vibhutikumar11/angularHttpClientGetRequest/

Thanks

You havent written any code in github.com/vibhutikumar11/angularHttpClientGetRequest/blob/…. How are you trying to bind ? — Shashank Vivek
– Shashank Vivek, Commented May 8, 2018 at 6:15
this is my component ts file. github.com/vibhutikumar11/angularHttpClientGetRequest/blob/… please have a look . actually i do not know how to declare nested interface.you can see attached screen shot of my console. stucked to bind train route data to my html. Thanks — vibhuti Kumar
– vibhuti Kumar, Commented May 8, 2018 at 6:17

Shashank Vivek · Accepted Answer · 2018-05-08 06:23:21Z

1

Check this example.

you simply need to assign a variable

  ngOnInit() { 
    this.http.get<DataResponse>('https://api.railwayapi.com/v2/route/train/12566/apikey/xg6ymuliox/').subscribe(data => {
         this.data = data;
        },
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log('Client-side error occured.');
          } else {
            console.log('Server-side error occured.');
          }
        }
      );
  }

answered May 8, 2018 at 6:23

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

2 Comments

vibhuti Kumar Over a year ago

Thank you very much. your solution works for me. now i am able to bind data like this in my html. Thanks. <table style="width:100%"> <tr> <th>#</th> <th>station Name</th> <th>Arr</th> <th>Dep</th> <th>Halt</th> <th>Dist</th> <th>Day</th> <th>PF</th> </tr> <tr *ngFor="let route of data.route"> <td></td> <td>{{route.station.name}}</td> <td>{{route.scharr}}</td> <td>{{route.schdep}}</td> <td>{{route.halt}}</td> <td>{{route.distance}}</td> <td>{{route.day}}</td> <td>{{route.no}}</td> </tr> </table>

Shashank Vivek Over a year ago

@vibhutiKumar . Please mark it as answer as well ;) .

Darsan S Kumar · Accepted Answer · 2018-05-08 06:22:32Z

0

You can use async observables to bind the data from api directly to angular component.

In .ts

 myObservable = new Observable((observer) => {
  this.http.get<DataResponse>('https://api.railwayapi.com/v2/route/train/12566/apikey/xg6ymuliox/').subscribe(data => {
    observer.next(data);

         },
         (err: HttpErrorResponse) => {
           if (err.error instanceof Error) {
             console.log('Client-side error occured.');
           } else {
             console.log('Server-side error occured.');
           }
         }
       );
      }
      );

In .html

<div *ngFor="let item of myObservable | async">
     Do any bindings you want
 </div>

answered May 8, 2018 at 6:22

Darsan S Kumar

3013 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to bind response data in angular using http Client using thrid party api

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related