What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view.

This is the response from the REST API:


{
    "courses": [
        {
            "topic_covered": [
                "5ddfc24bbd5a910c4c969324",
                "5ddfc4e2ce2ae8276421306a",
                "5ddfc9553879b52154081c2e",
                "5ddfcb0e7d56a916289191b5",
                "5ddfdf5983f4cb0aa0785798",
                "5ddfdf8cc60f2321aceba246",
                "5de1203718079320b4d5c990",
                "5de1207e18079320b4d5c992"
            ],
            "_id": "5ddfc13d92eb1e27640b42b2",
            "degprog": "MCS",
            // more course details...
        }
    ],
    "_id": "5ddfc02c92eb1e27640b42af",
    "t_id": 1500,
    "t_name": "Abbasi",
    "t_desig": "Cs&IT",
    // more teacher details...
}

When I use this code snippet:


<tr>
    <th>Name</th>
    <td>{{teacher?.t_name}}</td>
</tr>

It works fine and displays the Name. How can I access and display the values from the Courses array?

htmlarraysangulartypescript

Answer №1

Is this the solution you're looking for? 

 <tr>
    <th>Name</th>
    <td>{{teacher?.t_name}}</td>
    <td>{{teacher?.courses[0]?.theValueYoUWantToUse}}</td>
 </tr>

You must specify the index since courses is an array

Here's a stackblitz example to help: https://stackblitz.com/edit/angular-bctbwv

Alternatively, you can use ngFor on the courses like this 

enter code     <tr>
    <th>Name</th>
    <td>{{teacher?.t_name}}</td>
    <td><div *ngFor="let data of teacher.courses">{{data.session}}</div></td>
 </tr>

EDIT : Here's a stackblitz example with ngFor : https://stackblitz.com/edit/angular-wuppjm

Answer №2

courses are actually an array type that you can include in any html tag you desire, for example:

<li *ngFor="course of courses; index as i; trackBy: trackByValueYouWant">...</li>

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

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

javascriptjqueryhtmlcss

Ways to interact with elements lacking an identifier

Currently, I'm faced with an HTML challenge where I need to interact with an element labeled tasks. *<td class="class_popup2_menuitem_caption" unselectable="on" nowrap="">Tasks</td>* In my attempt to do so, I've implemented the foll ...

pythonhtmlselenium

After updating to version 13 of Angular and Angular Material, the mat-contenteditable feature has ceased functioning

Encountered errors with mat-contenteditable after updating Angular from version 12 to 13 Error: /node_modules/mat-contenteditable/lib/mat-ckeditor.directive.d.ts:9:22 - error TS2420: Class 'MatCkeditorDirective' incorrectly implements interface & ...

angularnpmangular-materialpackage.jsonangular13

Node.js script encounters errors fetching static files

My HTML index.html file has multiple containers, and I have included the bootstrap and font awesome folders in the <head> section like this: <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/css/bootstra ...

htmlnode.jsexpress

Error in custom TypeScript: Incorrect error instance detected within the component

I encountered a unique issue with my custom Error export class CustomError extends Error{ constructor(message: string) { super(message); Object.setPrototypeOf(this, CustomError.prototype); this.name = "CustomError"; } Furthermore ...

reactjstypescripterror-handlingnext.js

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

htmlcss

Refreshing content with Ajax when the back button is clicked

Hey everyone, I've been working on an ajax site and I'm having trouble getting the content to reload when the back button is clicked. I'm using Dynamic Drives ajax content script along with a script that changes the URL onclick and a popstat ...

javascriptjqueryhtmlajax

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

htmlcssangulartypescript

What is the best way to incorporate an image as an input group addon without any surrounding padding or margin?

Hello, I am currently working on integrating a captcha image into a Bootstrap 4 form as an input group item. It is functioning correctly, but there is an issue with a border around the image causing the input field to appear larger than the others. Below i ...

htmlcsstwitter-bootstrapbootstrap-4

NGRX 8 reducer now outputting an Object rather than an Array

I am facing an issue where the data returned from the reducer is an object instead of an array. Despite trying to return action.recentSearches, it doesn't seem to work as expected. The data being returned looks like this: { "loading": false, "recent ...

angulartypescriptngrxangular8state-management

Investigating SCSS Issues: The Problem with Absolute Imports

I am working on a project with the following structure: - my/project - assets - images - image-name.svg - source - components - MyComponent - MyComponent.module.scss - ... - ... ...

typescriptnext.jssass

What happens when there is no match found while attempting to edit a form with the UI-Bootstrap typeahead directive?

Here is the code that demonstrates how my typeahead input box functions. Users can enter a name, and the relevant information will populate the rest of the form. If no match is found, users should still be able to input the name and related details into th ...

javascripthtmlangularjsangular-ui-bootstrap

The ion-range slider does not function properly when trying to display a central label

After customizing the ion range slider to suit my needs, I am looking for some simple functionalities: 1. The label should be centered. 2. When clicking on the label, the handle should move accordingly. 3. There should be a color gap between two valu ...

jqueryhtmltwitter-bootstraprangesliderion-range-slider

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

I am looking to run a function in the background using a worker, with data coming from an HTTP request. Currently, I have a mock calculation (e.data[0] * e.data[1] * xhrData.arr[3]) in place, but I plan to replace it with a function that returns the actual ...

javascriptangularangular-cliservice-workerweb-worker

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?

Where does my layout provide a solution, and what adjustments can be made? I attempted modifying the screen dimensions in the Dw Design page without success. ...

htmlcssmobilelayoutdreamweaver

Discovering collections of vectors that add up to zero

I am working with four arrays, each containing 3 arrays. For example: set1 = [array([1, 0, 0]), array([-1, 0, 0]), array([0, 1, 0]), ...] My goal is to determine the number of combinations of vectors that sum to zero. The current solution involves nested ...

pythonarraysperformancenumpysum

The silent refresh functionality is currently not functioning as expected in Angular's OAuth OIDC implementation

In my Angular SPA, I am attempting to silently refresh the access token. The authentication with ADFS has been successfully completed and everything is functioning properly. Below is the configuration that I have implemented: oauthService.configure({ ...

angularjhipsteropenid-connectadfsangular-oauth2-oidc

What is an example of an array attribute within a generic class?

In my typescript code, I have created a generic class with two properties like this - export class WrapperModel<T>{ constructor(private testType: new () => T) { this.getNew(); } getNew(): T { return new this.testType ...

angulartypescriptgenerics

Utilizing ControlValueAccessor for accurate data validation

I've developed my own input fields using the ControlValueAccessor. How can I retrieve validation information within this component? Feel free to check out an example here: https://stackblitz.com/edit/angular-ngmodel-valid?file=src/app/text-input.com ...

angularangular-forms

Is the TypeScript compiler neglecting the tsconfig.json file?

I am new to TypeScript and currently exploring how to set it up in WebStorm. One of the first steps I took was creating a tsconfig.json file in the main directory of my project and updating the built-in TypeScript compiler to version 1.6.2. However, despit ...

typescriptreferencetsconfig