Ignacio Basti
Reputation: 117
Iterate an array using its length inside a nested ngFor loop - Angular 9
Im iterating an array of objects and inside of each of this objects there is another array of objects with values such as "name" and "id". This array of objects (called noticias) have a variable length.
I need to display this values, I've only been able to access and display them by hardcoding the "X" shown below.
<div *ngFor="let c of DATA; let i = index;">
{{i}}{{c.name}}
<div *ngFor="let novedad of DATA; let i2 = index; ">
<div *ngIf="i2 === i">
{{novedad.noticias[0][X].name | json}} --> HERE
</div>
</div>
</div>
The DATA array comes from a service that uses a series of http calls to form such array.
Is there a way of iterating {{novedad.noticias[0][LOOP THROUGH LENGTH OF EACH OBJECT].name | json}} ?
I hope my question is understandable. Thanks in advance!
JSON object:
[
{
"id": 6,
"name": "Encantamientos",
"forumid": 6,
"courseid": 6,
"type": "news",
"noticias": [
"Este curso no tiene novedades"
]
},
{
"id": 5,
"name": "Historia de la magia",
"forumid": 5,
"courseid": 5,
"type": "news",
"noticias": [
[
{
"id": 9,
"name": "aviso 1",
"groupid": -1,
"timemodified": 1585598111,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 9,
"parent": 0,
"userid": 3,
"created": 1585598111,
"modified": 1585598111,
"mailed": 0,
"subject": "aviso 1",
"message": "<p>aviso1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
},
{
"id": 2,
"name": "Difusión ",
"forumid": 1,
"courseid": 2,
"type": "news",
"noticias": [
[
{
"id": 8,
"name": "tema difusin 3",
"groupid": -1,
"timemodified": 1585595618,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 8,
"parent": 0,
"userid": 3,
"created": 1585595618,
"modified": 1585595618,
"mailed": 0,
"subject": "tema difusin 3",
"message": "<p>cuerpo tema difusion 3.<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 2,
"name": "2",
"groupid": -1,
"timemodified": 1585221896,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 2,
"parent": 0,
"userid": 3,
"created": 1585221896,
"modified": 1585221896,
"mailed": 0,
"subject": "2",
"message": "<p>aviso 2<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 1,
"name": "aviso 1",
"groupid": -1,
"timemodified": 1584460837,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 1,
"parent": 0,
"userid": 3,
"created": 1584460837,
"modified": 1584460837,
"mailed": 0,
"subject": "aviso 1",
"message": "<p>aviso 1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
},
{
"id": 4,
"name": "Quimica",
"forumid": 3,
"courseid": 4,
"type": "news",
"noticias": [
[
{
"id": 7,
"name": "aviso quimica 3",
"groupid": -1,
"timemodified": 1585324962,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 7,
"parent": 0,
"userid": 3,
"created": 1585324962,
"modified": 1585324962,
"mailed": 0,
"subject": "aviso quimica 3",
"message": "<p>cuerpo aviso quimica 3<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio basti",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 5,
"name": "quimica aviso 2",
"groupid": -1,
"timemodified": 1585241926,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 5,
"parent": 0,
"userid": 3,
"created": 1585241926,
"modified": 1585241926,
"mailed": 0,
"subject": "quimica aviso 2",
"message": "<p>quimica aviso 2</p><p><br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "link",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
},
{
"id": 3,
"name": "aviso quimica 1",
"groupid": -1,
"timemodified": 1585232670,
"usermodified": 3,
"timestart": 0,
"timeend": 0,
"discussion": 3,
"parent": 0,
"userid": 3,
"created": 1585232670,
"modified": 1585232670,
"mailed": 0,
"subject": "aviso quimica 1",
"message": "<p>contenido del posteo quimica 1<br /></p>",
"messageformat": 1,
"messagetrust": 0,
"attachment": false,
"totalscore": 0,
"mailnow": 0,
"userfullname": "ignacio ",
"usermodifiedfullname": "ignacio ",
"userpictureurl": "link",
"usermodifiedpictureurl": "",
"numreplies": 0,
"numunread": 0,
"pinned": false,
"locked": false,
"starred": false,
"canreply": true,
"canlock": true,
"canfavourite": true
}
]
]
}
]
Upvotes: 0
Views: 2917
Answers (2)
bryan60
Reputation: 29335
not sure I understand you fully but you should just be able to do:
<div *ngFor="let c of DATA; let i = index;">
{{i}}{{c.name}}
<ng-container *ngFor="let inner of c.noticias">
<div *ngFor="let novedad of inner">
{{novedad.name | json}}
</div>
</ng-container>
</div>
ngFor your DATA array, then within each of those, ngFor over the noticias array, and then once again over the inner as it's an array of arrays.
Upvotes: 2
RBC
Reputation: 478
<div *ngFor="let c of outerArray; let i = index;">
{{i}}{{c.name}}
<div *ngFor="let novedad of c.innerArray; let i2 = index; ">
<div *ngIf="i2 === i">
{{novedad.noticias[i2].name | json}} --> HERE
</div>
</div>
</div>
As per conceptual and fundamental, it should be like this. Otherwise depends on your response data.
Upvotes: 1
Related Questions
- Error looping through an array with NgFor
- how to loop through array using ngFor in angular 11
- Angular iterate object of arrays
- Multidimensional array iteration with ngFor
- *ngFor iterating the values of the array
- Angular 2+ Iterate over array of arrays
- Angular 5 nested ngFor using 1 dimentional array
- Angular 4 ngFor looping through array of objects with HTML
- How do I iterate over an array within an object within an array using *ngFor in angular 2?
- Looping through array in Angular 2