Displaying nested web service array data in Angular 4

Question

Displaying nested web service array data in Angular 4

I created a project that retrieves data from a web service API. However, the API contains nested arrays that also need to be displayed. How can I access the data from these nested JSON arrays? What is the correct way to extract this data within the HTML code in order to display it properly? Interestingly, the initial objects are being fetched correctly, but the issue arises with the nested objects.

Below is a screenshot of the response from Postman:

https://i.sstatic.net/EUXgJ.png

To access the API, please follow this link: API Link

If you'd like to view the project on Stackblitz, click on this link: Project Link

To see the issue I am encountering, simply click on "sign in without user or password," then choose any school, and finally navigate to the divisions section within the project. The specific component I am referring to is the divisions component.

json angular web-services typescript multidimensional-array

Answer 1

Answer №1

From what I recall, the data you're looking for is readily available. Simply navigate through the dots to access the necessary information: response.data[0].grade[0].classes[1].grade_id

Here's how you can achieve this in the template:

<div *ngFor="let division of divisionList">
    <div *ngFor="let grade of division.grade">
        <div *ngFor="let class of grade.classes">
            <span>{{ class.grade_id }}</span>
        </div>
    </div>
</div>

To get started in your component, try this:

<ng-container *ngIf="divisionList">
    <button name="American Primary"  
        *ngFor="let division of divisionList"
        class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1">
           {{division.name}}
         <i class="fa fa-arrow-right pull-right arrow-down-onclick1" 
            aria-hidden="true" style="margin-top:12px"></i>
    </button>
    <a routerLink="/editaisdivision" 
        style="text-decoration: none;">
       <span class="fa fa-pencil pen-pen-pen" aria-hidden="true" 
             style="margin-left: 10px; color: #171b5e;"></span>
     </a>
</ng-container>

Keep in mind that using two structural directives within one tag is not allowed, hence the ng-container.

Answer 2

From what I recall, the data you're looking for is readily available. Simply navigate through the dots to access the necessary information: response.data[0].grade[0].classes[1].grade_id

Here's how you can achieve this in the template:

<div *ngFor="let division of divisionList">
    <div *ngFor="let grade of division.grade">
        <div *ngFor="let class of grade.classes">
            <span>{{ class.grade_id }}</span>
        </div>
    </div>
</div>

To get started in your component, try this:

<ng-container *ngIf="divisionList">
    <button name="American Primary"  
        *ngFor="let division of divisionList"
        class="choose-list arrow-onclick1" data-toggle="collapse" data-target="#list1">
           {{division.name}}
         <i class="fa fa-arrow-right pull-right arrow-down-onclick1" 
            aria-hidden="true" style="margin-top:12px"></i>
    </button>
    <a routerLink="/editaisdivision" 
        style="text-decoration: none;">
       <span class="fa fa-pencil pen-pen-pen" aria-hidden="true" 
             style="margin-left: 10px; color: #171b5e;"></span>
     </a>
</ng-container>

Keep in mind that using two structural directives within one tag is not allowed, hence the ng-container.

Answer 3

Answer №2

Simply employ the JSON.parse(JSON_DATA) method to transform your JSON string into a JavaScript object.

Answer 4

Simply employ the JSON.parse(JSON_DATA) method to transform your JSON string into a JavaScript object.

Displaying nested web service array data in Angular 4

Answer №1

Answer №2

Similar questions

The specified control name formControlName in the Angular reactive form cannot be located

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

What is the best way to extract data from Azure Data Lake and showcase it within an Angular-2 interface?

Emitter fails to emit the value

Elastic Beanstalk hosted apps do not support the transmission of large files

Vue.js with TypeScript: The property 'xxx' is not found on the type 'never'

"assurance of not issuing a return value in the correct order

What methods can I employ within an AngularJS controller to retrieve data from Google App Engine instead of solely relying on a JSON file?

How can you make sure that VS Code always utilizes relative paths for auto imports in TypeScript?

Following an AJAX post within the MVC framework, the URL becomes excessively lengthy

Incorporate a new data field within a JSON array

Updating JWT token with Angular 5 Http Interceptor

When working with Angular 5, the question arises: how and where to handle type conversion between form field values (typically strings) and model properties (such

Reference for the WinRT DataServiceContext service supporting version 5.2.0.0 of Microsoft.Data.Services.Client.WindowsStore

I have encountered limitations with useFormik where it does not accept null values for initialValues, even while utilizing a validationSchema

How do I properly type when extending Button and encountering an error about a missing component property?

Interface constructor concept

Forming a JSON structure using input variables

Issue with DTO and a custom decorator in NestJS

How to efficiently deserialize JSON into a List of objects using Kotlin and Jackson without encountering a Deserialization Exception