CODEWITHSUNDEEP
angularjs
Achraf Elmorabit
Achraf Elmorabit

Reputation: 1

GET request in Angular

Hi guys I had used this code my AngularJS app to execute a GET request, now I want to use it in Angular I have some problems with update it can anyone help me ?

script :

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("http://---:8080/api/v1/users")
      .then(function(response) {
        $scope.users = response.data;
        $scope.AfficherMap = AfficherMap;
        console.log(response.data);
    }).catch(function(response) {
        console.log("ERROR:", response);
    });

html:

<div ng-controller="myCtrl" style="width: 250px;">
    <div ng-repeat="user in users" ng-click="AfficherMap(user.id)">
        <a>{{user.id}} {{user.firstName}} {{user.lastName}}</a>
    </div>
</div>

Upvotes: 0

Views: 52

Answers (2)

narayan nyaupane
narayan nyaupane

Reputation: 313

You can do this in this way... Make a get function in UserService: 

constructor(http:HttpClient){}

getUsers(){
  return this.http.get("api_url");
}

Now In your component call this function.

constructor(private userService: UserService){

}
ngOninit(){
  this.userService.getUsers().subscribe((res)=>{

 console.log(res); // This is your users list...
 this.users =  res;
});

}

Now In your html

<div  style="width: 250px;">
    <div *ngFor="let user of users">
        <a (click)="AfficherMap(user.id)">{{user.id}} {{user.firstName}- 
                  {{user.lastName}}
      </a>
    </div>
</div>

Upvotes: 1

Mostav
Mostav

Reputation: 2612

AngularJS(1.x) and Angular(2+) are totally different frameworks, in Angular(2+) you will need to use HttpClient module to do an HTTP call more details on the official doc

Find a suggestion for your code:

getUsers() {
  this.api.getUsersCall()
    .subscribe(users => {
      for (const u of (users as any)) {
        this.users.push({
          name: u.name,
          username: u.username
        });
      }
    });
}

given that api is an instance of the APIService you need to create a module for it and declare it in your component class with the specifier private, APIService module will contains the definition of getUsersCall:

getUsersCall() {
   return this.http.get("http://---:8080/api/v1/users");
}

Upvotes: 0

Related Questions