How to iterate through nested object in Angular 2 using Type Script?

Question

Hi I am developing web application using Angular 2. I am receiving JSON data using API. I am trying to segregate data. Below is my JSON data.

[  
   {  
      "userid":"f8b7b393-b36d-412b-82f7-9500e9eb6924",
      "tenantid":"7a4a4ea9-3b39-4ef6-8d00-fcfe7454888c",
      "username":"testuser3",
      "emailaddress":"[email protected]",
      "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":"[email protected]",
      "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":"[email protected]",
      "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
            }
         }
      ]
   }
]

Below are my corresponding models.

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;
}

Below is role model

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

Below is the sample data i am trying to get

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

First array of above object contains userid and below it contains again array of userroles. So i am trying to get each rolename associated with userid in a single row.

Below code i tried.

 users.forEach(eachObj => {
                eachObj.userroles.forEach(nestedeachObj => {

                });
            });

I am not able to go forward in the above foreach loop. Can someone help me to segregate above data? Any help would be appreciated. Thank you.

What do you mean by not able to go forwards? Whats the error? The code you tried looks correct to me at first glance — Plog
– Plog, Commented Jan 26, 2018 at 9:23
the sample data you're trying to get doesn't make sense: you have several times the same property (rolename) in the same object. What are you actually trying to achieve?What's wrong with the model you have (i.e. UerModel having an array of UserRole)? — JB Nizet
– JB Nizet, Commented Jan 26, 2018 at 9:28
Hi JB Nizet. Lets say i do not have strongly typed object. Then how can i iterate? — Niranjan
– Niranjan, Commented Jan 26, 2018 at 9:46
I don't understand what you mean. Edit your question, and explain what you really want to achieve. — JB Nizet
– JB Nizet, Commented Jan 26, 2018 at 9:59

Burgi0101 · Accepted Answer · 2018-01-26 11:49:47Z

Hey I really don't know if my code example will achieve what you are looking for but what my example is creating looks like this:

RESULT:

[
 {
  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);         
          });
        };

Niranjan · Accepted Answer · 2018-01-26 10:01:14Z

0

I have added below code and worked fine.

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

answered Jan 26, 2018 at 10:01

Niranjan

5872 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to iterate through nested object in Angular 2 using Type Script?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related