Why can't I iterate through JSON data in Angular (typescript)?

Question

dataset: any = {
    "days": [
      {
        "datevalue":1,
        "status":"disable",
        "addclass":"notallowed",
        "avability":[]
      },
      {
        "datevalue":2,
        "status":"disable",
        "addclass":"allowed",
        "avability":[]
      }
    ]
}



<tr *ngFor="let row of dataset.days; let i = index">
   <td *ngFor="let day of row | keyvalue">
      {{day.datevalue}}
    </td>
</tr>

How to print the datevalue inside td ? Currently its showing blank.

I AM STUCK VERY BADLY. PLEASE HELP

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable — str, Jun 05 '20 at 15:14

Soukyone · Answer 1 · 2020-06-05T15:45:05.777

3

row is an object, and you re trying to loop it, it's not possible, you need to use Object.keys: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

for (let row of this.dataset.days) {
  for (let data of Object.keys(row)) {
    console.log(row[data]);
  }
 }

EDIT: To loop an object through a *ngFor, there is a pipe KeyValuePipe: https://angular.io/api/common/KeyValuePipe

<div *ngFor="let item of yourObject | keyvalue">
  {{item.key}}:{{item.value}}
</div>

in your case :

    <tr *ngFor="let row of dataset.days; let i = index"> 
       <td *ngFor="let item of row | keyvalue"> 
           {{ item.value }} 
       </td> 
    </tr>

edited Jun 05 '20 at 15:45

answered Jun 05 '20 at 15:13

Soukyone

528
1
11

You might want to link to the *English* version of the documentation for this English oriented site. – crashmstr Jun 05 '20 at 15:15
Yes, i didn't pay attention, edited – Soukyone Jun 05 '20 at 15:18
How to show in view file? {{data}} – Swatantra Mukherjee Jun 05 '20 at 15:31
I edited, my answer – Soukyone Jun 05 '20 at 15:39
@Soukyone how to print datevalue in td? – Swatantra Mukherjee Jun 05 '20 at 17:04
My code part, is already with td – Soukyone Jun 08 '20 at 15:17

score 0 · Answer 2 · answered Jun 05 '20 at 15:12

0

While this.dataset.days is an array (the outer for ... of loop doesn't throw an error), its elements are objects, and you can't iterate through them.

for (let row of this.dataset.days) {
  console.log(row);
}

Will work.

answered Jun 05 '20 at 15:12

mbojko

9,720
1
10
20

{{data}} – Swatantra Mukherjee Jun 05 '20 at 15:31

Why can't I iterate through JSON data in Angular (typescript)?

2 Answers2