Binding api's JSON attribut with my angular 2 model class

Ionic Framework ionic-v3
1

I have model class with some attribute name (I create models for local storage), how can I bind these attributes with my api response?
exemple:

Class:

                    @Injectable()
            export class User {
              private _id:number;
              private server_id?:number;
              private account_id:number;
              private code:number;
              private teamApp?:Team;
              private teamServer?:Team;
              private filialeApp:Filiale;
              private filialeServer?:Filiale;
              private login:string;
              private rang:string;
              private civilite?:string;
              private prenom?:string;
              private nom?:string;
              private email?:string;
              private lang:string ='FR';
              private phone?:string;
              private comment?:string;
              private isActif:number;
              private synchronizationDate?: Date;
              private addDate:Date;
              private editDate:Date;
              private lastViewDate:Date;
                  private isToSync?:number;
              constructor(values: Object = {}) {
                Object.assign(this, values);
              }
            }

API response:

    {
"u_id":"9999",
"u_fk_account_id":"999",
"u_nonce":"aaaaaaaaaaaaaaaa",
"u_fk_filiale_id":"0",
"u_fk_media_id_avatar":null,
"u_fk_team_id":"0",
"u_fk_disponibilite_id":"0",
"u_fk_fonction_id":"0",
"u_code_id":"1",
"u_login":"test",
"u_rang":"1",
"u_civilite":"1",
"u_prenom":"Test",
"u_nom":"Test",
"u_email":"contact@example.com",
"u_lang":"fr_FR",
"u_phone":"",
"u_birthdate":"0000-00-00",
"u_insee":"",
"u_is_working_lundi":"1",
"u_is_working_mardi":"1",
"u_is_working_mercredi":"1",
"u_is_working_jeudi":"1",
"u_is_working_vendredi":"1",
"u_is_working_samedi":"0",
"u_is_working_dimanche":"0",
"u_week_working_hours":"39",
"u_comment":"",
"u_inscription_date":"2016-06-19 00:00:00",
"u_inscription_date_gmt":"2016-06-19 00:00:00",
"u_inscription_ip":"127.0.0.1",
"u_inscription_user_agent":null,
"u_inscription_by_fk_user_id":"0",
"u_last_access_date":"2016-09-13 12:09:44",
"u_is_favorite":"0",
"u_is_actif":"1"
}

REST call:

    return this._http.get(this.url+'parameters',this.options).share()
      .map((res:Response) => new User(res.json()))
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }
2

this is horrible → if you want to make this → give your class an interface with allowed keys, type the api response (only for programming purpose).

And in your case you need some functions to transform your backend repsonses in the form you want it ;). No magic, which transforms ‘u_lang’ to ‘lang’.

You have to do it on your own… So you could pass all attributes you want to the constructor like you should do it.

1 Like
3

Thank you @bengtler !
So if I understand, I must make an interface for each class, and allow data with this interface, like:

    export interface User {
  name: string;
  email?: string;
  ...
}

@Injectable()
export class UserService {
  me: User;

  constructor() {

  }
  setUser(user: User) {
    this.me = user;
  }
}
4

yep :).

and if you need default values for some keys you can transform the interface to a class

1 Like
5

@bengtler I found a treasure to be sure to have a correct model from JSON files !
json2ts

1 Like