映射列表中每个项目的单个JSON属性

huangapple
go评论93阅读模式
英文:

Map single json property for each item in a list

问题

以下是您要翻译的内容：

"fullName" 属性在 "Team" 接口中无法正常工作，因为我想将其映射到 JSON 中的 "full_name"。

如何最佳地将 "full_name" 映射到 "fullName"，而不是在接口中直接使用 "full_name"，因为这种命名约定不被推荐使用？

希望这有所帮助。如果您需要更多信息，请告诉我。

英文:

I am new to Angular and I am using Angular 14

1- JSON response :

  1. {
  2.     "data": [
  3.         {
  4.             "id": 1,
  5.             "abbreviation": "ATL",
  6.             "city": "Atlanta",
  7.             "conference": "East",
  8.             "division": "Southeast",
  9.             "full_name": "Atlanta Hawks",
  10.             "name": "Hawks"
  11.         },
  12.         {
  13.             "id": 2,
  14.             "abbreviation": "BOS",
  15.             "city": "Boston",
  16.             "conference": "East",
  17.             "division": "Atlantic",
  18.             "full_name": "Boston Celtics",
  19.             "name": "Celtics"
  20.         }
  21. }

- Model Interface :

  1. export interface TeamResponse{
  2.     data: Team[];
  3. }

- Team Interface :

  1. export interface Team{
  2.     id: Number;
  3.     abbreviation: string;
  4.     city: string;
  5.     conference: string;
  6.     division: string;
  7.     name: string;
  8.     fullName: string; // I wan to map this to full_name json property
  9. }

- Service:

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

- Component Typescript File:

  1. export class TeamSelectComponent implements OnInit {
  3.   selectedTeam! : Team;
  4.   teams : Team[] = [];
  6.   constructor(private teamService:TeamService) { }
  8.   ngOnInit() {
  9.     this.teamService.getTeams().subscribe({
  10.       next: (response: TeamResponse) => {
  11.         this.teams = response.data;
  12.       },
  13.       error: (e) => console.error(e),
  14.       complete: () => console.info('complete') 
  15.   })
  16.     
  17.   }
  19. }

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.

答案1

得分: 1

以下是您要翻译的内容：

"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"

请注意，其中包含一些代码部分，已经被保留，未进行翻译。

英文:

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

  1. getTeams(): Observable&lt;Team[]&gt;{
  2.    return this.httpClient.get&lt;Team[]&gt;(this.teamsServiceURL).pipe(
  3.       map((res:any)=&gt;{
  4.         return res.data.map((x:any)=&gt;({
  5.           ...x,
  6.           fullName:x.full_name  //&lt;--see this line
  7.         }))
  8.       })
  9.    )
  10. }

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

  1. this.teamService.getTeams().subscribe({
  2.       next: (response: Team[]) =&gt; {
  3.         this.teams = response;
  4.       },
  5.       error: (e) =&gt; console.error(e),
  6.       complete: () =&gt; console.info(&#39;complete&#39;) 
  7.     })

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

  1. getTeam(id:number){
  2.    return this.httpClient.get(...).pipe(
  3.       map((res:any)=&gt;({
  4.           ...x,
  5.           fullName:x.data.full_name  //&lt;--see this line
  6.         }))
  7.    )
  8. }

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

答案2

得分: 0

我不是TypeScript专家。但我猜它期望JSON和接口的fullName键应该相同。

我的建议是避免使用下划线，而是尝试使用驼峰命名法。

英文:

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.

答案3

得分: 0

  1. getTeams(): Observable&lt;Team&gt;{
  2.    return this.http.get&lt;TeamResponse&gt;(this.teamsServiceURL).pipe(
  3.       map((teams) =&gt; teams.map(
  4.           team =&gt; {
  5.               return {
  6.                  ...team,
  7.                  fullName: team.full_name 
  8.               }
  9.           }
  10.       ))
  11.    );
  12. }
英文: 
  1. getTeams(): Observable&lt;Team&gt;{
  2.    return this.http.get&lt;TeamResponse&gt;(this.teamsServiceURL).pipe(
  3.       map((teams) =&gt; teams.map(
  4.           team =&gt; {
  5.               return {
  6.                  ...team,
  7.                  fullName: team.full_name 
  8.               }
  9.           }
  10.       ))
  11.    );
  12. }

huangapple
  • 本文由 发表于 2023年2月8日 15:19:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/75382476.html
  • angular
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定