Displaying nested data in Angular ngFor set not working

Question

I have a value set that I am trying to display. This is the structure of it. The problem I have is trying to display the third item as the structure of it is slightly different. Note this can be dynamic so it won't always be the third item that has a different structure.

[
  {
    "id": "1b255d6d-f771-4c16-9d64-fdb188dc9298",
    "categoryId": null,
    "filename": "dummy.pdf",
    "url": "http..."
  },
  {
    "id": "8d17ee10-54e0-48eb-8c21-83e7c6ca6751",
    "categoryId": null,
    "filename": "dummy (1).pdf",
    "url": "http..."
  },
  [
    {
      "id": "42b30baf-a945-412e-a53d-803e57c684cf",
      "categoryId": null,
      "filename": "1 Rules of the Road draft1.pdf",
      "url": "http..."
    }
  ],
  {
    "id": "1d0531e0-f0ad-4026-bfa0-5f19fa4fbca0",
    "categoryId": null,
    "filename": "offer.pdf",
    "url": "http..."
  }
]

Here is my HTML

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
    </div>
  </div>
</div>

I have attempted the below but it does not work

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments; let i = index" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
      <div *ngFor="let userdoc of doc.Array" class="ui-g-6 ui-sm-12">
          <div class="doc-container">
            <span
              ><img src="img"
            /></span>
            <span>{{ userdoc.filename }}{{ userdoc.filetype }}</span> 
            <button (click)="openDocWindow(userdoc.url)">...</button>
          </div>
        </div>
    </div>
  </div>
</div>

So, you know where and what the issue is. What have you tried to solve it? — Jota.Toledo, Jul 25 '19 at 06:57
@Jota.Toledo I have tried another ngFor with the first one but it's not working — skydev, Jul 25 '19 at 07:37

Bhanu Tej P · Accepted Answer · 2019-07-25T07:38:52.893

0

By using *ngIf else condition:

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
<div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
        <div *ngIf="doc.filename; else other">
            <span>{{ doc.filename }}{{ doc.filetype }}</span> 
  <button (click)="openDocWindow(doc.url)">...</button>
   </div>
   <ng-template #other>

        <div *ngFor="let d of doc" class="ui-g-6 ui-sm-12">
     {{d.filename}}
        <button (click)="openDocWindow(d.url)">...</button>
          </div>
   </ng-template>
</div>

edited Jul 25 '19 at 07:38

answered Jul 25 '19 at 07:08

Bhanu Tej P

220
1
5

This only caters for 1 array element – skydev Jul 25 '19 at 07:35
Modified the code to handle multiple inner arrays. Let me know whether it is working or not. – Bhanu Tej P Jul 25 '19 at 07:40
This is a poor approach, over-complicating and/or duplicating the template just to overcome a minor variation in the data structure does not seem right. You could avoid the duplication it by using `ngTemplateOutlet`. – Jota.Toledo Jul 25 '19 at 09:19

Ethan Vu · Answer 2 · 2019-07-25T07:06:03.350

-1

Use || operator :

Created a stackblitz working example for you

 <div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span><img src="img"/></span>
      <span>{{ doc.filename || doc[0].filename}}{{ doc.filetype || doc[0].filetype }}</span> 
      <button (click)="openDocWindow(doc.url || doc[0].url)">...</button>
    </div>
  </div>

edited Jul 25 '19 at 07:06

answered Jul 25 '19 at 06:58

Ethan Vu

2,911
9
25

Does not really solves the issue, and introduces a new one: you are trying to access the nested array through an index associated to the outer one. Furthermore, the more properties of the `doc` template variable are bound to the template, the more of your `||` is spread across it. – Jota.Toledo Jul 25 '19 at 07:01
1

This will only work under the condition that the nested arrays have a single element. – Jota.Toledo Jul 25 '19 at 07:17
This is for one element in the array – skydev Jul 25 '19 at 07:28

Displaying nested data in Angular ngFor set not working

2 Answers2