get value from nested array json angular

Question

I am trying to get the value from nested array. Some how I was not able to get the value.

Here is my JSON

                {
        "VersionNum": "",
        "studyLevel": [{
                "countryName": "StudyLevel",
                "FS": "15-JAN-2020",
                "LS": "10-Jan-2020",
                "FI": "08-DEC-2019",
                "LI": "10-FEB-2019",
                "getData": [{
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Vimal",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "5",
                        "Username": "Jack",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 3
                    },
                    {
                        "countryId": 0,
                        "userId": "6",
                        "Username": "James",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 1
                    }
                ]
            },
            {
                "countryName": "Country 1",
                "FS": "15-JAN-2020",
                "LS": "10-Jan-2020",
                "FI": "08-DEC-2019",
                "LI": "10-FEB-2019",
                "getData": [{
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Paul",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Smith",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    },
                    {
                        "countryId": 0,
                        "userId": "4",
                        "Username": "Trumble",
                        "FI": "12-JAN-2020",
                        "LI": "21-Feb-2020",
                        "experience": 5
                    }
                ]
            }
        ]
    }

I am trying to access Username from getData Here is my ts code

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.reponsearray = data;   
  this.responseuserName = data.getData[0].Username;   
});

Here is my HTML

      <ng-container *ngFor="let item of responseuserName ">
           <th  [attr.colspan]="keycount" class="User-names">{{item.userName}}</th>
      </ng-container>

Please let me know what I am doing wrong here.

do you want to display all the username? bcs i am seeing in your html you are iterating a loop for displaying a user name — Yash Rami
– Yash Rami, Commented Mar 18, 2020 at 14:08

Yash Rami · Accepted Answer · 2020-03-18 14:56:08Z

1

you can try like this. here as you can see we have an array of object the studyLevel and inside that we have another array of the object getData so we are using the two *ngFor loop one inside another

TS

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.responseuserName = data.studyLevel;   
});

HTML

 <ng-container *ngFor="let item of responseuserName ">
     <ng-container *ngFor="let data of intem. getData >
           <th  [attr.colspan]="keycount" class="User-names">
{{data.userName}}</th>
     </ng-container>
 </ng-container>

edited Mar 18, 2020 at 14:56

answered Mar 18, 2020 at 14:12

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr.M Over a year ago

Can you please help me on the above JSON request

Yash Rami Over a year ago

@Mahadevan i updated my answer let me know if it is not working

Mr.M Over a year ago

<th colspan="5"></th> <ng-container *ngFor="let row of responsearray.studyLevel"> <ng-container *ngFor="let col of row.trialDesignElements"> <th [attr.colspan]="keycount" class="trial-names">Treatment length ({{col.treatmentLength}}) </th> </ng-container> </ng-container>

StepUp · Accepted Answer · 2020-03-18 14:56:24Z

0

studyLevel array has desired data:

const getUserData = this.dataService.getuserList().subscribe((data:any) => {
  console.log(data);
  this.reponsearray = data;   
  this.responseuserName = data.studyLevel[0].getData[0].Username;   
});

UPDATE:

You can create a nested *ngFor:

<div *ngFor="let row of response.studyLevel">
  <div *ngFor="let col of row.getData">
    {{col.Username}} {{col.FI}} {{col.LI}}
  </div>
</div>

As a suggestion, you could rename responseuserName to responseuserNames.

The work stackblitz example can be seen here.

edited Mar 18, 2020 at 14:56

answered Mar 18, 2020 at 14:00

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

8 Comments

Mr.M Over a year ago

after adding this also the data is not populating this is my html <ng-container *ngFor="let item of responseuserName"> <th *ngIf="item" [attr.colspan]="keycount" class="user-names">{{item.username}}</th> </ng-container>

Rahul Raveendran Over a year ago

for that you only need to assign this.responseuserName = data.studyLevel[0].getData @Mahadevan

StepUp Over a year ago

@Mahadevan is it ok for you?:)

Mr.M Over a year ago

@StepUp I am getting error :( Cannot read property 'studyLevel' of undefined

StepUp Over a year ago

@Mahadevan have you seen stackblitz example?

|

Collectives™ on Stack Overflow

get value from nested array json angular

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related