Question

user.ts

    import { Company } from "./company";

export class User{
    token: string;
    companies: Company;
    name: string;
    email: string;
    currentCompanyID: string;

    constructor(){
    }

}

company.ts

export class Company{
    companyId: string;
    name: string;
    orgNo: string;

    constructor(){

    }

}

service.ts

    getData(): Observable<User> {
    return this.http.get(this.url).map((res: Response) => res.json())
}

component.ts

//call to my  api in service.ts
this.avrs.getData().subscribe(
  res => {
      console.log("Result");
      console.log("main res: " + res);
      console.log("Name: " + res.name);
      console.log("companyid: " + res.currentCompanyID);
      console.log("companies: " + res.companies);
      console.log("token: " + res.token);

      console.log("user data: " + res.companies.companyId);
      console.log("user data: " + res.companies.name);
      console.log("user data: " + res.companies.orgNo);

  },
  error => {
      console.log(error);
  },
  () => {

  }
);
 }

输出

Result
 main res: [object Object]
 Name: undefined
 companyid: 28764
 companies: [object Object]
 token: lkjdfjsgosdfjuguerujgoiehjiughdskjge9r8w
 user data: undefined
 user data: undefined
 user data: undefined

Json响应示例：

{
"user": {
    "id": 123456,
    "company_id": "28764",
    "name": "TEST",
    "email": "test@dummy.com",
    "mobile": "91273493412412",
    "locale": "en",
    "companies": [
        {
            "companyId": "idww",
            "name": "nameww",
            "orgNo": "orgww",
            "roles": [
                {
                    "role": "Admin"
                },
                {
                    "role": "Guest"
                }
            ],
            "services": []
        },
        {
            "companyId": "idqq",
            "name": "nameqq",
            "orgNo": "orgqq",
            "roles": [
                {
                    "role": "Admin"
                },
                {
                    "role": "Guest"
                }
            ],
            "services": []
        },
    ],
},
"token": "lkjdfjsgosdfjuguerujgoiehjiughdskjge9r8w",
"currentCompanyID": "28764"

}

我想得到：令牌，

companyid，

用户 - ＆gt;名，

用户 - ＆gt;公司阵列

问题基本上是什么是在Angular 2+中处理json文件中的许多数组的最佳方法（最佳实践）？正如您在我的输出中看到的那样，我只获得了systemid和令牌数据，而没有得到公司阵列或用户数据。

Answer 1

创建角色模型：

export class Role{
    id: number;
    name: string;

    constructor(attrs: any = null) {
        if (attrs) {
            this.build(attrs);
        }
    }

    build(attrs: any): void {
        this.id = attrs.id;
        this.name = attrs.name;
    }
}

创建公司模型：

export class Company{
    id: number;
    name: string;
    roles: Array<Role>;
    services: any;

    constructor(attrs: any = null) {
        if (attrs) {
            this.build(attrs);
        }
    }

    build(attrs: any): void {
        this.id = attrs.id;
        this.name = attrs.name;
        this.services = attrs.services;
        if(attrs.roles) {
            this.roles = attrs.roles.map(
                r => new Role(r)
            );
        }
    }

}

创建用户模型：

export class User{
    id: number;
    name: string;
    email: string;
    companies: Array<Company>;


    constructor(attrs: any = null) {
        if (attrs) {
            this.build(attrs);
        }
    }

    build(attrs: any): void {
        this.id = attrs.id;
        this.name = attrs.name;
        this.email = attrs.email;
        if(attrs.companies) {
            this.companies = attrs.companies.map(
                c => new Company(c)
            );
        }
    }
}

通过这样做，您可以自动创建实体。根据您的Json Response示例，您需要创建另一个模型。我们称之为数据！

export class Data{
        user: User;
        token: string;
        currentCompanyID: string;


        constructor(attrs: any = null) {
            if (attrs) {
                this.build(attrs);
            }
        }

        build(attrs: any): void {
            this.currentCompanyID = attrs.currentCompanyID;
            this.token = attrs.token;
            this.user = attrs.user;
        }
    }

从样本服务方法中检索数据，如下所示：

getData(): Observable<any>{
    return this.http
      .get('awesome_url')
      .map((data: any) => new Data(data));
}

希望我能帮忙！

Angular 4+处理多阵列json响应最佳实践

1 个答案: