Map single json property for each item in a list

I am new to Angular and I am using Angular 14

1- JSON response :

{
    "data": [
        {
            "id": 1,
            "abbreviation": "ATL",
            "city": "Atlanta",
            "conference": "East",
            "division": "Southeast",
            "full_name": "Atlanta Hawks",
            "name": "Hawks"
        },
        {
            "id": 2,
            "abbreviation": "BOS",
            "city": "Boston",
            "conference": "East",
            "division": "Atlantic",
            "full_name": "Boston Celtics",
            "name": "Celtics"
        }
}

- Model Interface :

export interface TeamResponse{
    data: Team[];
}

- Team Interface :

export interface Team{
    id: Number;
    abbreviation: string;
    city: string;
    conference: string;
    division: string;
    name: string;
    fullName: string; // I wan to map this to full_name json property
}

- Service:

getTeams(): Observable<TeamResponse>{
   return this.http.get<TeamResponse>(this.teamsServiceURL);
}

- Component Typescript File:

export class TeamSelectComponent implements OnInit {

  selectedTeam! : Team;
  teams : Team[] = [];

  constructor(private teamService:TeamService) { }

  ngOnInit() {
    this.teamService.getTeams().subscribe({
      next: (response: TeamResponse) => {
        this.teams = response.data;
      },
      error: (e) => console.error(e),
      complete: () => console.info('complete') 
  })
    
  }

}

Everything works file except for the fullName property in Team interface since I want to map it to full_name in json.

What is the best way to map full_name to fullName instead of easily using full_name in the interface ?

since this naming convention is not recommended.

If you have not access to your API you can change a bit your service to return an array of Teams

For this, use "map" in your service to return an array of Team

getTeams(): Observable<Team[]>{
   return this.httpClient.get<Team[]>(this.teamsServiceURL).pipe(
      map((res:any)=>{
        return res.data.map((x:any)=>({
          ...x,
          fullName:x.full_name  //<--see this line
        }))
      })
   )
}

And change the component call to service to be as follows :

this.teamService.getTeams().subscribe({
      next: (response: Team[]) => {
        this.teams = response;
      },
      error: (e) => console.error(e),
      complete: () => console.info('complete') 
    })

Equal, when you search an unique Team you also use map, I imagine some like

getTeam(id:number){
   return this.httpClient.get(...).pipe(
      map((res:any)=>({
          ...x,
          fullName:x.data.full_name  //<--see this line
        }))
   )
}

NOTE: If you have access to your API, sure you can make that return fullName and not full_name, e.g. in .NET you can customize property names

I'm not an expert in typescript. But, I guess its expecting the both keys should be same in json and interface for fullName.

my suggestion, avoid using underscore instead try using camelCase.

getTeams(): Observable<Team>{
   return this.http.get<TeamResponse>(this.teamsServiceURL).pipe(
      map((teams) => teams.map(
          team => {
              return {
                 ...team,
                 fullName: team.full_name 
              }
          }
      ))
   );
}