> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/dotnet-302-core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/dotnet-302-core/5-displaying-users-on-the-client/5.4-retrieving-users-from-the-database.md).

# 5.4: Retrieving Users from the Database

## Adding Our API's Base Url to Environment Config

Currently, we only have one service, our `AuthService`. It's storing our base API URL as a hard-coded string.

As we add other services, it will be easier to have this in our configuration. If we need to make changes (for example, deployment) it will be easier to change it in one location.

Open up the `environment.ts` file inside of the environments folder and update it to include the `apiUrl`:

```typescript
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api/'      // <--- Added
};
```

Now, we can update our `AuthService` class to use this endpoint instead of the one hard-coded:

```typescript
baseUrl = environment.apiUrl;
```

Update the `login()` and `register()` methods to access the appropriate endpoint (by adding `/auth/`):

```typescript
login(model: any) {
    return this._http.post<AuthUser>(this.baseUrl + 'auth/login', model, { headers: new HttpHeaders()          //    modified
      .set('Content-Type', 'application/json') })
      .map(user => {
        if (user) {
          localStorage.setItem('token', user.tokenString);
          this.decodedToken = this._jwtHelperService.decodeToken(user.tokenString);
          this.userToken = user.tokenString;
        }
      });
  }

  register(model: any) {
    return this._http.post(this.baseUrl + 'auth/register', model, { headers: new HttpHeaders()                 //    modified
      .set('Content-Type', 'application/json')
    });
  }
```

## Adding a User Service

In the root of your `SPA` application, run the following command to generate a new `UserService`:

```
ng g s /services/user --no-spec
```

Update the newly generated service to the following:

```typescript
export class UserService {

  baseUrl = environment.apiUrl;

  constructor(
    private _http: HttpClient,
    private _authService: AuthService,
    private _jwtHelperService: JwtHelperService) { }

  getUsers(): Observable<User[]> {
    return this._http.get<User[]>(this.baseUrl + 'users', { headers: new HttpHeaders()
      .set('Authorization', `Bearer ` + this._authService.decodedToken) });
  }

}
```

Make sure that the `UserService` is imported and in the providers array in your `app.module.ts` file (CLI doesn't automatically add it for some reason):

```typescript
import { UserService } from './services/user.service';

//  ...

providers: [
    AuthService,
    UserService,
    AuthGuard
  ],
```

## Display Users in the MemberListComponent

Now, let's display our `Users` in our `MemberListComponent`.

Open up `member-list.component.ts` and add this code:

```typescript
export class MemberListComponent implements OnInit {

  users: User[];

  constructor(private _userService: UserService) { }

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    this._userService.getUsers().subscribe((users: User[]) => {
      this.users = users;
    }, error => {
      console.log('Failed to load users.');
    });
  }

}
```

Now, let's use this in our template to display them.

Add the following to `member-list.component.html`.

We'll improve this shortly, but for now let's test to make sure our service is set up correctly and getting data from our backend.

When you login as a user, you should see an ugly list of the names of our users.

![RetrievingUsers](https://122480229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfVcpLNVPaSQtyc%2F-LEoXBIjxiJ9_48lrXMp%2F-LEoXDZblgct1nbQ8cso%2Fretrievingusers.png?generation=1528816005737043\&alt=media)