How to fetch data in Angular

Question

can someone help me with getting number from http response in Angular 5 ? I don't now how to do it, I was searching at internet but Angular grow very fast so it doesn't help me. Thanks for any help !

My code:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../entities/User';

@Injectable()
export class UserService {

  private usersurl: 'http://localhost:8080/api/users';

  user: User;
  id: number;

  constructor(private http: HttpClient) {}

  isLoggedIn() {
    return this.user != null;
  }

  isAdmin() {
    return this.user.isAdmin;
  }

  unLoggin() {
    this.user = null;
  }

  login(username: string, password: string) {
    this.id = null;
    this.http.get<number>(`${this.usersurl}/verify?username=${username}&password=${password}`).subscribe(id => this.id = id);
    alert(this.id);
    if (this.id != null) {
      return true;
    } else {
      return false;
    }
  }

}

It alert [object Object] localhost:8080/api/users/verify returns for example 8 only 8 no json formated 8

Do you want data in number format rather than string? Can you put some code as well as json format? — Mahi, Dec 09 '17 at 10:45
@ErikBystroň Still not making sense, please add more detail to your question and what code you have tried so far. — Kay, Dec 09 '17 at 11:04
@Ahmadmnzr I tried this.http.get(this.usersurl + '/verify?username=' + username + '&password=' + password).subscribe(val => this.id = val); but it return [object Object] — Erik Bystroň, Dec 09 '17 at 11:04
@Erik Bystroň, as you can see some possible answer below, likewise , put codes of .ts, html, service.ts etc for better understanding of your problems. — Mahi, Dec 09 '17 at 11:25

Paul Halliday · Accepted Answer · 2017-12-10T10:06:47.900

To make a Http call inside of Angular we can use the HttpClient. This requires us to import the HttpClientModule inside of our root module (app.module.ts):

import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';

// Omitted other dependencies for brevity
@NgModule({
  imports: [HttpClientModule],
  providers: [DataService],
})
export class AppModule {}

Inside of our service (i.e. data.service.ts) which we've registered as a provider, we can inject HttpClient and use the get method:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  ROOT_URL = 'http://your-api.com';

  constructor(private http: HttpClient) {}

  getUserId(username: string, password: string) {
    return this.http
      .get<number>(`${this.ROOT_URL}/verify?username=${username}&password=${password}`)
  }
}

Inside of our Component we can then subscribe to the Observable emitted from our service:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>UserId: {{userId}}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  userId: number;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService
      .getUserId('test', 'password')
      .subscribe(id => this.userId = id);
  }
}

Alternatively, we can use the Async pipe to let Angular handle the subscription:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
    <h1>UserId: {{userId$ | async}}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  userId$: Observable<Number>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.userId$ = this.dataService.getUserId('test', 'password');
  }
}

Thank you, but it doesn't works, id is still undefined... https://hastebin.com/micoworuke.js — Erik Bystroň, Dec 09 '17 at 12:44

score 0 · Answer 2 · answered Dec 09 '17 at 11:11

0

When you make a HTTP request it returns a observable object which you subscribe to. If you want to manipulate the data and only return the id you can use the map function.

function getUserID() {

    return this.http.get('this.usersurl + '/verify?username=' + username + 
    '&password=' + password').map(val => val.id)
}

this.getUserID.subscribe((data) => {
    console.log(data); // should return the id (number).
});

So the above returns only the id (number) of the val object.

answered Dec 09 '17 at 11:11

Kay

17,906
63
162
270

it can only be used on constructor – Erik Bystroň Dec 10 '17 at 14:01
@ErikBystroň This is not helpful, you make no attempt at trying it and providing proper feedback. – Kay Dec 10 '17 at 14:27
I added my actual code upper and some more info. The cause of this will be plain number not number in json format.... – Erik Bystroň Dec 10 '17 at 19:17

How to fetch data in Angular

2 Answers2