如何将JSON数组映射到地图运算符中的角模型

Question

我正在尝试将我的JSON数组对象从服务器映射到角模型。我相信，这样做的最佳地点是我将它们放在地图上的管道中。不确定如何使用地图操作员进行此操作。

稍后，我使用复杂的数据源过程来填充我的表格和分页。我看不到该初始从服务器获得后如何分解JSON。

我尝试使用类和构造函数。我尝试创建另一个类，以获取该特定模型的列表。而且我尝试在班上使用可见的方法。我相信必须有一种角度的魔术方式将其作为接口。有任何想法吗？

P.S仍然是反应性编程的新手！

     export class PlaylistService {
      constructor(private http: HttpClient) { }
      findPlaylistTracks(
           playlistId: string, filter = '', sortOrder = 'asc',
           pageNumber = 0, pageSize = 3): Observable<PlaylistItem[]> {
    return this.http.get<PlaylistItem[]>('api/spotify/playlist- item',{
            params: new HttpParams()
                .set('playlistId', playlistId.toString())
                .set('filter', filter)
                .set('sortOrder', sortOrder)
                .set('pageNumber', pageNumber.toString())
                .set('pageSize', pageSize.toString())
            })
    .pipe(
          map((res: PlaylistItem[]) => <PlaylistItem[]>res['payload']),
          tap( val => console.log('are they mapped to models ?',val)));
        }
    }

    export interface PlaylistItem {
      albumInfo: PlayListAlbum;
      artists: PlayListArtist;
      playlistName: string;
      trackNumber: number;
      trackDuration: string;
      trackUri: string;
    }
     export interface PlayListArtist{
       artistName: string;
       fullArtistInfo: string;
    }

     export interface PlayListAlbum{
       albumName: string;
       relatedAlbums: string;
     }

{playlist_name: "Dubliners", track_name: "Seven Drunken Nights - 1993 
Remaster", album_info: {…}, artists: {…}, track_duration: "3:46", …}
{playlist_name: "Dubliners", track_name: "The Black Velvet Band", 
album_info: {…}, artists: {…}, track_duration: "3:36", …}
{playlist_name: "Dubliners", track_name: "The Foggy Dew", album_info: 
{…}, artists: {…}, track_duration: "3:42", …}

没有错误。TAP((日志中的Val仍然打印JSON键/值。

Answer 1

这是我最终所做的：

创建此接口。

export interface Deserializable {
     deserialize(input: any): this;
  }

将其添加到我的课程

export class PlaylistItem implements Deserializable {
  public album_info: PlayListAlbum;
  public artists: PlayListArtist;
  public playlist_name: string;
  public track_number: number;
  public track_duration: string;
  public track_uri: string;
  public track_name: string;
  deserialize(input: any) {
    Object.assign(this, input);
    this.album_info = new PlayListAlbum().deserialize(input.album_info);
    this.artists = new PlayListArtist().deserialize(input.artists);
    return this;
  }
}
export class PlayListAlbum implements Deserializable {
  public album_name: string;
  public related_albums: string;
  deserialize(input: any): this {
    return Object.assign(this, input);
  }
}
export class PlayListArtist implements Deserializable {
  public artist_name: string;
  public full_artist_info: string;
  deserialize(input: any): this {
    return Object.assign(this, input);
  }
}

然后在pipe(( -> map((中进行转换：

  }).pipe(
      map(res => res['payload'].map(data => new PlaylistItem().deserialize(data)))
          );
    }

我必须像JSON这样的蛇盒。但这有效。现在我有角度模型。