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

Question

I am trying to map my JSON array objects from my server to an angular model. I believe the best place to do this is as soon as I have them in the pipe at map. Not sure how I can do this with the map operator.

Later on I use a complex data source process to fill my table and paginate. I do not see how I could break up the json after this initial get from the server.

I have tried using classes and constructors. I have tried creating another class that takes the list of that particular model. And I have tried using a deserilizable method on the class. I believe there must be an angular magic way of doing this as interfaces. Any ideas?

ps Still new to reactive programming!

     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", …}

No errors. The val in the tap() log still prints the json key/values.

Answer 1

This is what I did in the end:

created this interface.

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

added it to my classes

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);
  }
}

Then did the conversion in Pipe() -> Map() like so:

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

I have to use snake case like the json. But it works. Now I have angular models.