Iterate an array using its length inside a nested ngFor loop - Angular 9

Question

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

Can you share the entire json?

Nicholas K
– Nicholas K

2020-04-15 17:57:45 +00:00
Commented Apr 15, 2020 at 17:57 — Nicholas K
– Nicholas K, Commented Apr 15, 2020 at 17:57
i've added it in the question. Thanks!

Ignacio Basti
– Ignacio Basti

2020-04-15 18:05:33 +00:00
Commented Apr 15, 2020 at 18:05 — Ignacio Basti
– Ignacio Basti, Commented Apr 15, 2020 at 18:05

bryan60 · Accepted Answer · 2020-04-15 18:25:00Z

2

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.

edited Apr 15, 2020 at 18:25

answered Apr 15, 2020 at 18:04

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

9 Comments

Ignacio Basti Over a year ago

Hello! Thanks! I've shared the json object in the question. I've tried what you said, but i can still only display the first array adding [0] to {{novedad[0].name | json}} otherwise nothing happens, not even an error. I think there is something wrong with my data structure but i can't figure out what it is.

bryan60 Over a year ago

ah yea for some reason your subarray is an array of arrays? I modified my answer adding a 3rd ngFor

bryan60 Over a year ago

yes but your noticias isn't an array of objects. it's an array of arrays of objects, not sure why as the outter array seems to always only contain one array that contains multiple objects, and seems redundant

Ignacio Basti Over a year ago

I must be doing something wrong when composing the array in my service. Is there a fix for moving a level up in the array?

bryan60 Over a year ago

fix whatever you're doing in the service. or nest more ngFor as I have in my updated answer

|

RBC · Accepted Answer · 2020-04-15 18:04:56Z

1

<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.

answered Apr 15, 2020 at 18:04

RBC

4781 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Iterate an array using its length inside a nested ngFor loop - Angular 9

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related