Question

您好我正在使用Angular 2开发Web应用程序。我正在使用API接收JSON数据。我试图隔离数据。以下是我的JSON数据。

react

以下是我的相应型号。

[  
   {  
      "userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
      "tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
      "username":"testuser3",
      "emailaddress":"testuser3@rkdssravioutlook.onmicrosoft.com",
      "isallowed":false,
      "userroles":[  
         {  
            "userroleid":"c4c64675-ffe0-467b-87a4-00b899e0d48e",
            "userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
            "roleid":"ada09fb2-fa83-4e46-8878-7e4e48c73111",
            "tenantappid":1,
            "validfrom":"2018-01-24T00:00:00",
            "validto":"2018-01-24T00:00:00",
            "isactive":true,
            "isdeleted":false,
            "role":{  
               "roleid":"ada09fb2-fa83-4e46-8878-7e4e48c73111",
               "rolename":"Installer",
               "tenantid":"99999999-9999-9999-9999-999999999999",
               "isactive":true,
               "isdeleted":false,
               "actionnames":null,
               "scopeids":null,
               "scopes":null,
               "actionids":null,
               "actions":null
            }
         },
         {  
            "userroleid":"bf632c7b-7540-479e-b8ec-b1471efd7f93",
            "userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
            "roleid":"80dc8c6a-a934-4c2e-9d17-7cdd5b774fc6",
            "tenantappid":1,
            "validfrom":"2018-01-24T00:00:00",
            "validto":"2018-01-24T00:00:00",
            "isactive":true,
            "isdeleted":false,
            "role":{  
               "roleid":"80dc8c6a-a934-4c2e-9d17-7cdd5b774fc6",
               "rolename":"Operator",
               "tenantid":"99999999-9999-9999-9999-999999999999",
               "isactive":true,
               "isdeleted":false,
               "actionnames":null,
               "scopeids":null,
               "scopes":null,
               "actionids":null,
               "actions":null
            }
         }
      ]
   },
   {  
      "userid":"8363def7-7547-425c-8d55-2116dd703cfc",
      "tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
      "username":"testuser1",
      "emailaddress":"testuser1@rkdssravioutlook.onmicrosoft.com",
      "isallowed":false,
      "userroles":[  
         {  
            "userroleid":"fe2b1f9f-4cd8-48dc-9708-2637e9743c1d",
            "userid":"8363def7-7547-425c-8d55-2116dd703cfc",
            "roleid":"ada09fb2-fa83-4e46-8878-7e4e48c73111",
            "tenantappid":1,
            "validfrom":"2018-01-24T00:00:00",
            "validto":"2018-01-24T00:00:00",
            "isactive":true,
            "isdeleted":false,
            "role":{  
               "roleid":"ada09fb2-fa83-4e46-8878-7e4e48c73111",
               "rolename":"Installer",
               "tenantid":"99999999-9999-9999-9999-999999999999",
               "isactive":true,
               "isdeleted":false,
               "actionnames":null,
               "scopeids":null,
               "scopes":null,
               "actionids":null,
               "actions":null
            }
         }
      ]
   },
   {  
      "userid":"7f359233-5940-4b93-8ec9-fcf39e2fb58f",
      "tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
      "username":"testuser2",
      "emailaddress":"testuser2@rkdssravioutlook.onmicrosoft.com",
      "isallowed":false,
      "userroles":[  
         {  
            "userroleid":"c479b1c0-5275-40b2-893e-fc82dc55f1a5",
            "userid":"7f359233-5940-4b93-8ec9-fcf39e2fb58f",
            "roleid":"4dd2803b-e723-4356-8381-7c514ba13247",
            "tenantappid":1,
            "validfrom":"2018-01-24T00:00:00",
            "validto":"2018-01-24T00:00:00",
            "isactive":true,
            "isdeleted":false,
            "role":{  
               "roleid":"4dd2803b-e723-4356-8381-7c514ba13247",
               "rolename":"Engineer",
               "tenantid":"99999999-9999-9999-9999-999999999999",
               "isactive":true,
               "isdeleted":false,
               "actionnames":null,
               "scopeids":null,
               "scopes":null,
               "actionids":null,
               "actions":null
            }
         }
      ]
   }
]

以下是角色模型

export class UserModel {
 public userid: string;
    public tenantid: string;
    public isallowed: boolean;
    public emailaddress: string;
    public upn: string;
    public userroles: UserRole[];
    public roleid: string;
    public isactive: boolean;
    public tenantappid: string;
    public username: string;
    public userrolestext: string;
    public validfrom: string;
    public validto: string;
}

以下是我想要的样本数据

export class UserRole {
 public userid: string;
 public roleid: string;
 public role: Role;
}

上面对象的第一个数组包含userid，在它下面又包含了一个userroles数组。所以我试图将每个与userid相关联的角色名称放在一行中。

我试过下面的代码。

[
{
"userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
"tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
"rolename":"Installer",
"rolename":"Operator",
},
{
//rest of the data
}
]

我无法在上面的foreach循环中继续前进。有人可以帮助我分离以上数据吗？任何帮助，将不胜感激。谢谢。

Answer 1

嘿，我真的不知道我的代码示例是否会实现您的目标，但我的示例创建的内容如下：

<强>结果：

[
 {
  tenantid: "7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c", 
  userid: "f8b7b393-b36d-412b-82f7-9500e9eb6924", 
  rolename: "Operator"
 },
 {
  tenantid: "7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c", 
  userid: "8363def7-7547-425c-8d55-2116dd703cfc", 
  rolename: "Installer"
 },
 {
  tenantid: "7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c", 
  userid: "7f359233-5940-4b93-8ec9-fcf39e2fb58f", 
  rolename: "Engineer"
 }
]

<强> CODE：

 const getRelevantData = (array) => {

           data.forEach((user) => {        
             const obj = {};

             obj.tenantid = user.tenantid;
             obj.userid = user.userid;

             user.userroles.forEach((userrole) => {
                obj.rolename = userrole.role.rolename;
             });

             array.push(obj);         
          });
        };

Answer 2

我已添加以下代码并且工作正常。

 this.userroleData = [];
            results.forEach(eachObj => {
                eachObj.userroles.forEach(nestedeachObj => {
                    this.userroleData.push({
                        username: eachObj.username,
                        userrolestext: nestedeachObj.role.rolename,
                    });
                });
            });

如何使用Type Script迭代Angular 2中的嵌套对象？

2 个答案: