HTTPClient Angular

Question

I'm new to angular6, I've been previously working lot of android projects and i had the Spring and Hibernate setup. Which is working super fine with the Android volley.

Now i'm finding difficult to extract the data from the RestAPI, So the REST api data is :

collection  {
  version   : "1.0"
  error : null
  **data    : {
      id    : 1
      name  : "Test"
      password  : "MTIzNDU="
      createdDate : null
      email : "[email protected]"
      userArea  : "coimbatore"
      fcmTokenId    : ""
      mobileNo  : 4545456456
      googleAuth    : "yes"
      appVersionCode    : null
      }**
      statusCode    : 200
      booleanStatus : null }

How do i extract the above collection data in Angular6?. I'm not sure how to debug like in android in angular. How to save this in User model in angular?

Model class of User:

export class User {
id: number;
name: String;
createdDate: Date;
email: String;
userArea: String;
fcmTokenId: String;
mobileNo: String;
googleAuth: String;
appVersionCode: String;
modifyDate: String;
serverTime: String;

get getid() {
    return this.id;
}

set setid(id: number) {
    this.id = id;
}

get getName() {
    return this.name;
}

set setName(name: String) {
    this.name = name;
}

Model of Collection :

export class Collection {
public version: String;
public data: Object;
public error: CollectionError;
public statusCode: number;
public booleanStatus: boolean;

get getError() {
    return this.error;
}

/**
 * @param error the error to set
 */
set setError(error: CollectionError) {
    this.error = error;
}

/**
 * @return the version
 */
get getVersion() {
    return this.version;
}

/**
 * @param version the version to set
 */
set setVersion(version: String) {
    this.version = version;
}

/**
 * @return the data
 */
get getData() {
    return this.data;
}

/**
 * @param data the data to set
 */
set setData(data: Object) {
    this.data = data;
}

get getStatusCode() {
    return this.statusCode;
}

set setStatusCode(statusCode: number) {
    this.statusCode = statusCode;
}

get isBooleanStatus() {
    return this.booleanStatus;
}

set setBooleanStatus(booleanStatus: boolean) {
    this.booleanStatus = booleanStatus;
}

}

And HTTP Client i tried so far is :

 constructor(private http: HttpClient) { }

 getUser(): Observable<Collection> {
   return this.http.get<Collection>('http://localhost:8080/tooveWeb/v1/user/1');
}

onClickLogin() {
this.data.getUser().subscribe((collection) => this.collection.user = 
collection.user);
console.log(this.collection);

}

How do i extract the data and store to model class and present to html?

Please suggest!

Thanks

Answer 1

In your subscription to getuser() method, you can assign the response data to user property of Collection class

private collection : Collection = new Collection() // method 1

OR

inject the Collection class in your component

constructor(private collection : Collection) { }  // method 2

this.getUser.subscribe((coll)=> {      
     this.collection.user= coll.data
})

Answer 2

How to save this in User model in angular?

You need to subscribe when you call the getUser. Inside the subscription you can assing the response value to the user models.

private collection : Collection;

this.getUser.subscribe((coll)=> {      
     this.collection.user= coll.data
})

How do i extract the above collection data in Angular6?.

You can access the user object using this.collection.user

I'm not sure how to debug like in android in angular

You can set breakpoints using debugger. And using browser developer tools (right click --> inspect).

Or you can use console.logs

Read this article for more info

Answer 3

Keep in mind that Http is asynchronous. That means with this code:

onClickLogin() {
  this.data.getUser().subscribe((collection) => this.collection.user = 
  collection.user);
  console.log(this.collection); //// <-- ALWAYS UNDEFINED!!
}

If you want to see your values, you need to move your logging within the subscribe as shown below:

onClickLogin() {
  this.data.getUser().subscribe((collection) => {
  this.collection.user = collection.user;
  console.log(this.collection); // <-- here instead
  });
}

next if you want to use collection in your template (html) you can use async pipe , check this answer