Nrthugu

I have the JSON of single object coming as:

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

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

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>

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

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>