如何反序列化包含带有TypeScript对象数组的响应并进行序列化?

时间:2019-05-29 20:16:28

标签: arrays json typescript deserialization angular-httpclient

我正在开发一个包含基于Rails的API和Angular7 Web应用程序的社交网络应用程序。基本上,Angular应用程序是API的Web界面。

我正在使用序列化Typescript库将rails API的返回映射到我的Angular模型,目标是将json响应从snake_case映射到camelCase。

基本上,我可以反序列化一个对象,但是不能反序列化一组对象。

特别是在我的情况下,我试图登录应用程序,而不是请求获取所有已记录的用户友谊,因为我建模了一个名为CurrentUser的类,该类对应于登录响应和Friendship对应于友情回复。

这是API的响应之一,以及我如何将其映射到带有库的我的模型之一,特别是此模型映射了登录过程的响应:

响应:

loginResponse: {
   created_at: "2019-05-25T09:18:55.708-03:00"
   email: "diego@gmail.com"
   enabled: true
   expire_at: "2019-05-29T14:45:51.000-03:00"
   id: 2
   login: "Diego"
   name: "Diego"
   profile_id: 2
   token: "65zWGEea6M9DCn2PsL-z"

   user_image: {
      enabled: true
      id: 2
      public_image_path: "http://localhost:3000/images/users`
   }
}

TS模式类:

export class CurrentUser {
  // * ============================================
  // * Attributes
  // * ============================================
  @autoserialize id: number;
  @autoserialize name: string;
  @autoserialize email: string;
  @autoserialize  login: string;
  @autoserialize enabled: boolean;
  @autoserializeAs('profile_id') profileId: number;
  @autoserializeAs('created_at') createdAt: Date;

  @autoserialize token: string;
  @autoserializeAs('expire_at') expireAt: Date;

  @deserializeAs(UserImage, 'user_image')  userImage: UserImage;

  // * ============================================
  // * Methodds
  // * ============================================
  constructor() { }
}

执行请求的TS服务类:

export class LoginService {
  // * ============================================
  // * Attributes
  // * ============================================
  private resourceLogin = 
  'http://localhost:3000/api/v1/logins';

  private resourceAuthToken = 
  'http://localhost:3000/api/v1/core_module/permission_module/authtokens';

  // * ============================================
  // * Methodds
  // * ============================================
  constructor(
    private http: HttpClient,
    private router: Router,
    private friendshipService: FriendshipService
  ) {}

  **THIS IS THE METHOD THAT PERFORMS THE REQUEST**
  public doLogin(login: Login): Observable<CurrentUser> {
    let httpParams = new HttpParams();
    httpParams = httpParams.set('login[email]', login.email.toString());
    httpParams = httpParams.set('login[password]', login.password.toString());

    return this.http
      .post<Login>(this.resourceLogin, httpParams)
      .pipe(map((data) => Deserialize(data, CurrentUser)));
  }
}

此过程运行完美,它可以转换所有带注释的属性。 当我尝试映射请求所有已记录的用户友好关系的方法的响应时,就会出现问题,我尝试了两种编写代码的方法。

以下是对api执行友谊请求的方法:

// FIRST VERSION
public findUserFriendships(currentUser: CurrentUser): Observable<Friendship[]> {
    let httpParams = new HttpParams();
    httpParams = httpParams.set('user_friendships', 'true');
    httpParams = httpParams.set('user_id', currentUser.id.toString());

    return this.http
      .get<Friendship[]>(this.resourceFriendship, {params: httpParams})
      .pipe(map((data) => Deserialize(data, Friendship)));
  }


// SECOND VERSION
public findUserFriendships(currentUser: CurrentUser): Observable<Friendship[]> {
    let httpParams = new HttpParams();
    httpParams = httpParams.set('user_friendships', 'true');
    httpParams = httpParams.set('user_id', currentUser.id.toString());

    return this.http
      .get<Friendship[]>(this.resourceFriendship, {params: httpParams})
      .pipe(map((data) => data.map((item) => Deserialize(item, Friendship))));
  }

我正在使用调试器术语调试应用程序,因此我基本上是在代码中编写调试器,并且当代码到达该点时,应用程序将停止。

通过这种调试方法,我能够发现,当我使用findUserFriendships方法的第一个版本时,我得到一个Friendship空对象,而当我使用findUserFriendships的第二个版本时,我什么也没有,我什至没有在调试器处停止;

无论如何,最终目标是映射Friendships数组中的所有Friendship对象。

谢谢。

0 个答案:

没有答案