i have one array and i want display array index and it's value also in angular 5 html, here is my array,

Anil K Chaudhary
0: {is_present: "1", name: "Anil K Chaudhary", date: "22"}
1: {is_present: "0", name: "Anil K Chaudhary", date: "20"}

Laxman J chavda
0: {is_present: "0", name: "Laxman J chavda", date: "22"}
1: {is_present: "1", name: "Laxman J chavda", date: "20"}

below is my html code,

<tr *ngFor = "let getAttendanceData_new of getAttendanceData[key]">
  <td>{{getAttendanceData_new}}</td>   // i want to display array Index here. (e.g "Anil K Chaudhary", "Laxman J Chavda")

  <!-- ======== AND ALSO WANT HERE THEIR VALUE ======== -->
  <td *ngFor="let getDays_new of getDays;let i = index">
    <b *ngIf="getAttendanceData.is_present == 1 && getDays_new == getAttendanceData.date" style="color:green">P</b>
    <b *ngIf="getAttendanceData.is_present == 0 && getDays_new == getAttendanceData.date" style="color:lightgrey">A</b>
  </td>

</tr>

i have one array and i want display array index and it's value also in angular 5 html, here is my array,

Anil K Chaudhary
0: {is_present: "1", name: "Anil K Chaudhary", date: "22"}
1: {is_present: "0", name: "Anil K Chaudhary", date: "20"}

Laxman J chavda
0: {is_present: "0", name: "Laxman J chavda", date: "22"}
1: {is_present: "1", name: "Laxman J chavda", date: "20"}

below is my html code,

<tr *ngFor = "let getAttendanceData_new of getAttendanceData[key]">
  <td>{{getAttendanceData_new}}</td>   // i want to display array Index here. (e.g "Anil K Chaudhary", "Laxman J Chavda")

  <!-- ======== AND ALSO WANT HERE THEIR VALUE ======== -->
  <td *ngFor="let getDays_new of getDays;let i = index">
    <b *ngIf="getAttendanceData.is_present == 1 && getDays_new == getAttendanceData.date" style="color:green">P</b>
    <b *ngIf="getAttendanceData.is_present == 0 && getDays_new == getAttendanceData.date" style="color:lightgrey">A</b>
  </td>

</tr>

• javascript
• arrays
• angular
• angular5

• 1 Please elaborate more so that others can understand and provide the solution that you are expecting. – Pramod Patil Commented Jan 23, 2018 at 7:17

2 Answers 2

Till now the best / shortesr answer I found is

Component side :

objectKeys = Object.keys;

Template side :

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

WORKING DEMO

You could use filter of Angular

{{ getAttendanceData_new | filter : {'name':index} }}