2

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. enter image description here

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

Thanks

2

2 Answers 2

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.');
          }
        }
      );
  }
Sign up to request clarification or add additional context in comments.

2 Comments

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>
@vibhutiKumar . Please mark it as answer as well ;) .
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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.