CODEWITHSUNDEEP
javascriptangularangular6
ashwin karki
ashwin karki

Reputation: 673

Error in while looping in *ngFor in angular

I have the JSON of single object coming as:

JSON Structure

I achieved this data by calling the API in component.ts file which is as follows

/* for auditgorup selecitonm */
this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
  .subscribe((datas: any[]) => {
    this.auditSelection = datas;
    console.log(this.auditSelection);

    // You'll have to wait that changeDetection occurs and projects data into 
    // the HTML template, you can ask Angular to that for you ;-)
    this.chRef1.detectChanges();

    // Now you can use jQuery DataTables :
    const tables: any = $('#nepal');
    this.dataTable = tables.DataTable();
  });

The view is as follows 

<table id="nepal" class="table table-bodered">
  <thead>
    <tr>
      <th>Selection No</th>
      <th>SelectionDate</th>
      <th>SelectedBy</th>
      <th>PanEximNumber</th>
      <th>Name</th>
      <th>Address</th>
      <th>PhoneNumber</th>
      <th>SelectionType</th>
      <th>Group Desc</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let nas of auditSelection">
      <td>{{nas.selectionId}}</td>
      <td>{{nas.selectionDate}}</td>
      <td>{{nas.selectedBy}}</td>
      <td>{{nas.panEximNumber}}</td>
      <td>{{nas.name}}</td>
      <td>{{nas.address}}</td>
      <td>{{nas.phoneNumber}}</td>
      <td>{{nas.selectionType}}</td>
      <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>
    </tr>
  </tbody>
</table>

At this last line of <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td> I cannot get the required value.

The output display should be "g1".

Upvotes: 0

Views: 80

Answers (4)

SAMUEL
SAMUEL

Reputation: 8552

As per the analysis of the JSON structure the assignmentAudit is an array so you can only access it with the index positions.

If you are sure the assignmentAudit is an array with single value then you can use 

<td>
  {{nas.assignmentAudit[0].auditorGroup.groupDesc}}
</td>

If assignmentAudit has multiple values and is not deterministic you can try

<td>
   <span *ngFor="let assignmentAudit of nas.assignmentAudit">
     {{assignmentAudit.auditorGroup.groupDesc}}
   </span>
</td>

Upvotes: 2

Toby Okeke
Toby Okeke

Reputation: 654

nas.assignmentAudit[0].auditorGroup.groupDesc

That would work. The section you are trying to access is an array. So picking the first index would then make it defined

Upvotes: 1

Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13787

groupDesc is insideauditorGroup loop so you cannot do like to get value inside loop. Try like that.

<!-- Angular -->
<ul>
  <li *ngFor="let item of nas.assignmentAudit.auditorGroup;">

  </li>
</ul>

or <td>{{nas.assignmentAudit.auditorGroup[0].groupDesc}}</td>

Upvotes: 0

Bharathkumar kamal
Bharathkumar kamal

Reputation: 211

I am unable to comment, so adding it over here. assignmentAudit is an array, so try accessing using index

Upvotes: 2

Related Questions