API Json 到 Angular 2 中的对象

Question

我有一个结构如

的 Json API

`{
    "type":"champion",
    "version":"7.8.1",
    "data":
     {
       "Jax":
       { 
            "id":24,
            "key":"Jax",
            "name":"Jax",
            "title":"o Grão-Mestre das Armas",
            "image":
            {
                  "full":"Jax.png",
                  "sprite":"champion1.png",
                  "group":"champion",
                  "x":144,
                  "y":48,
                  "w":48,
                  "h":48
              }
         }
......`

And I need to tranform this in a Object
My classes for this are this:

`export class Champion{
    private type: string;
    private version: string;
    private data: MasterModel[];
    from(data: any): Champion {
        this.type = data.type;
        this.version = data.version;
        this.data = data.data;
        return this;
    }
}`

https://br1.api.riotgames.com/lol/static-data/v3/champions?champData=image&api_key=RGAPI-2e393a98-cc36-4e17-b94b-e19622d1573a

`export class MasterModel{
    private master: ChampionDto;
    from(data: any): MasterModel {
        this.master = data.data;
        return this;
    }
}`

`export class ChampionDto{
    constructor(public id: number, public key: string, public name: string, public title: string, public image : ChampionImg){}
    from (data: any): ChampionDto {
        this.id = data.data.master.id;
        this.key = data.data.master.key;
        this.name = data.data.master.name;
        this.title = data.data.master.title;
        this.image = data.data.master.image;
     return this;
    }
}`

`export class ChampionImg{ 
    constructor(public full: string, public sprite: string, public group: string, public x: number, public y: number, public w: number, public h: number){}
    from (data: any): ChampionImg {
        this.full = data.full;
        this.sprite = data.sprite;
        this.group = data.group;
        this.x = data.x;
        this.y = data.y;
        this.w = data.w;
        this.h = data.h;
        return this;
    }
}`

说的对吗？让这些数据放入我的对象的最佳方法是什么？ 我在做

--服务

`getChampion(): Observable<Champion> {
        return this._http.get(this.riotUrl)
            .map((res:Response) => res.json())
            .map(res => new Champion().from(res))
            .do(data => console.log(JSON.stringify(data)));
    }`

--组件

`getData() {
    this._ChampionService.getChampion()
      .subscribe(data => {
        this.champions = data;
      })
  }`

但不起作用 idk 如果有帮助，但我想做这样的事情 -> http://gameinfo.na.leagueoflegends.com/en/game-info/champions/

有人帮助我吗？谢谢

Answer 1

我建议您实际使用接口。由于您知道数据的模型，因此您可以将它们键入到接口中。在此示例中，我将 JSON 重组为以下格式：

{
  type: "champion",
  version: "7.8.1",
  champions: [
    {
      // each champion details here
    }
  ]
}

其中champion 是一个对象，其中包含所有冠军的数组。如果您想以不同的方式构建它，您可以对代码进行适当的更改。

服务代码简单映射如下：

.map((res:Response) => res.json())

真正的魔法发生在组件中：P

  .subscribe(data => {
    // add the type and version and empty array of champions        
    this.champion = {type:data.type,version:data.version,champions:[]}      
    let keyArr: any[] = Object.keys(data.data),
    keyArr.forEach((key: any) => {
        // push values of each champion to the array
        this.champion.champions.push(data.data[key]);
    });
  })

现在你有了一个漂亮的小物件，里面有一系列的英雄，你可以在上面施展你的魔法:)

这是一个

Demo

我还没有完全做接口，但我建议你做:)

希望这可以帮助或至少将您推向正确的方向:)