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:

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.

jsonangularweb-servicestypescriptmultidimensional-array

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to attach 'gridOptions' as it is not a recognized attribute of 'ag-grid-angular' component (Angular4)

I am facing an issue with my HTML code and Angular components: <ag-grid-angular [gridOptions]="gridOptions"></ag-grid-angular> My component code is as follows: import {GridOptions} from 'ag-grid'; ... export class SampleComponent ...

angulartypescriptag-grid

Error occurs after upgrading React app to vite due to node-fetch issue

I'm a bit perplexed by this issue. Transitioning the build tool to vite has been seamless except for encountering this error: No matching export in "node_modules/node-fetch/lib/index.mjs" for import "RequestInit" No matching expor ...

node.jsreactjstypescriptvite

Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

After spending the last week attempting to set up and launch a simple project, I am using the following configuration: Angular 2, Visual Studio 2015 update 1, TypeScript Configuration In the root of my project, I have a tsconfig.Json file with the follow ...

typescriptvisual-studio-2015asp.net-coreangular

Having trouble with ngx-pagination's next page button not responding when clicked?

I am experiencing issues with pagination. The next page button does not function as expected, and clicking on the page number also does not work. Below is the code snippet and a Demo link for your reference. HTML <table mat-table [dataSou ...

angulartypescriptngx-pagination

Determine whether the radio button has been selected

Within my HTML code, there's a radio button enclosed in a form: <mat-radio-button [(ngModel)]="boxChecked" name="boxChecked" value="boxChecked">Check me</mat-radio-button> In the TypeScript section, I've declared my boolean variable ...

angulartypescript

Swagger Issue Resolved: Restriction on Number of Params Set

After setting up this option for my route, I noticed that when accessing the first parameter (page), it correctly returns the value entered in Swagger UI. However, when trying to access the second parameter (genre), it seems to interpret it as a string &ap ...

node.jstypescriptswaggeropenapiswagger-ui

How can you optimize the storage of keys in JS objects?

Just pondering over this scenario: Consider a line definition like the one below, where start and end are both points. let ln = { s: {x:0, y:0}, e: {x:0, y:0}, o: 'vertical' } Now imagine having a vast array of lines, how can we sav ...

javascripttypescriptobjectmemory-efficient

Ways to trigger a function in Angular every 10 seconds

What is the method to utilize Observable function for fetching data from server every 10 seconds? Custom App service fetchDevices (): Observable<Device[]> { return this.http.get(this.deviceUrl) .map(this.extractData) .catch(this ...

angulartypescript

Angular 4 is having trouble retrieving the JSON response

When I attempt to log errors in a specific scenario and use error, the following error message is displayed: { "errors" : [ { "entity" : "Movement", "property" : "direction", "invalidValue" : null, "message" : "Il campo non può essere v ...

angular

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

reactjstypescriptbluronblurmui

Retrieve data from the Parse.com database to analyze for insights and statistical analysis in business operations

I'm interested in finding a more efficient way to periodically run complex queries on my app's Parse database. Currently, we export the entire database as JSON, convert it to CSV, and analyze the data in Excel for business intelligence purposes. ...

jsoncsvparse-platformparse-cloud-code

What is the best approach for setting a value to an Observable<objectType>?

I'm struggling with this piece of code where I am unable to assign the data. Can someone help me understand why it's not working? Should I consider making the data an Observable? studentObservable<Student>; ngOnInit() { this.id = this.r ...

angular

Solution found: Issue with decoding PHP array into JSON fixed

Despite proper coding, the JSON decoder is showing an empty list. Even though a JSON array is received from the server, the Xcode console displays an empty array. News(news: []) Although the current response from the server is a valid JSON array: {"news ...

phpiosjsonswift

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...

javascriptreactjstypescriptreact-nativereact-hooks

Guide to sending a similar request as a curl command through a JavaScript file

After reviewing this Stack Overflow post titled "JavaScript post request like a form submit", I came across a similar situation. Currently, I have a curl command that performs as expected: curl -v -X POST -H "application/json" -H "Content-type: applicatio ...

javascriptjsoncurl

What is the correct way to wrap an http.get in TypeScript?

My understanding of Typescript is limited, so I have a basic question related to my web application's frontend. In most http get-requests, I need to include two parameters. To simplify this process, I created a simple wrapper for HttpClient (from "ang ...

angulartypescriptangular-httpclientangular12

Attention: WARNING regarding the NEXTAUTH_URL in the Development Console

While working on my Next.js web application with next-auth for authentication, I came across a warning message in the development console. The message is related to reloading the environment from the .env.local file and compiling certain modules within the ...

typescriptnext.jsenvironment-variablespnpm

The W3C Validator has found a discrepancy in the index.html file, specifically at the app-root location

While attempting to validate my HTML page, I encountered the following error: Error: Element app-root not allowed as child of element body in this context. (Suppressing further errors from this subtree.) From line 4347, column 7; to line 4347, column 16 ...

javascripthtmlangulartypescript

Using Objective-C alongside JSON and PHP can create powerful and

I need assistance with making a HTTP POST request from the iPhone SDK to a php file on my server. The code I am currently using is as follows: NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:@"http://*****/api ...

phpobjective-cjson

Derive the property type based on the type of another property in TypeScript

interface customFeatureType<Properties=any, State=any> { defaultState: State; properties: Properties; analyzeState: (properties: Properties, state: State) => any; } const customFeatureComponent: customFeatureType = { defaultState: { lastN ...

javascripttypescript