How to bind incoming values with angular view using reactive form?

Question

Hi i am getting these values from API i can successfully display teacher values but i don`t know how to use incoming array values of "COURSES" with my angular view?

this is response from rest API

{
    "courses": [
        {
            "topic_covered": [
                "5ddfc24bbd5a910c4c969324",
                "5ddfc4e2ce2ae8276421306a",
                "5ddfc9553879b52154081c2e",
                "5ddfcb0e7d56a916289191b5",
                "5ddfdf5983f4cb0aa0785798",
                "5ddfdf8cc60f2321aceba246",
                "5de1203718079320b4d5c990",
                "5de1207e18079320b4d5c992"
            ],
            "_id": "5ddfc13d92eb1e27640b42b2",
            "degprog": "MCS",
            "session": "2017-21",
            "semester": "2nd",
            "c_code": "55",
            "c_title": "SE",
            "c_hours": "4234",
            "m_quiz": 30,
            "m_assign": 20,
            "c_coordinator": "Ali Abbas",
            "c_url": "www.CsinBestWay.com",
            "c_catelog": "catelog dont know",
            "c_tbook": "Cs In BestWay",
            "c_reference": "CsinBestWay",
            "c_goals": "To understand students ",
            "c_pre": "Special None",
            "m_lab": null,
            "m_mid": 75,
            "m_final": 75,
            "m_total": 200,
            "__v": 8
        }
    ],
    "_id": "5ddfc02c92eb1e27640b42af",
    "t_id": 1500,
    "t_name": " Abbasi",
    "t_desig": "Cs&IT",
    "t_dob": "2019-11-14T00:00:00.000Z",
    "t_email": "[email protected]",
    "t_pswd": "abc",
    "t_phone": 7375343,
    "t_quali": "sters",
    "t_gender": "male",
    "t_p_img": "",
    "t_address": "Muzad",
    "__v": 1
}

When i use this

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

This works fine and displays Name , How can i use Courses array values?

Alann · Accepted Answer · 2019-11-29 16:12:40Z

1

Does something like this work ?

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

you need to specify your index since courses is an array

here is a little stackblitz : https://stackblitz.com/edit/angular-bctbwv

or you can make an 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 : stackblitz example with ngFor : https://stackblitz.com/edit/angular-wuppjm

edited Nov 29, 2019 at 16:12

answered Nov 29, 2019 at 15:51

Alann

6575 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alann Over a year ago

which solution ? can you update the stackblitz with the error ?

Saad Abbasi Over a year ago

above method works {{teacher?.courses[0]?.theValueYoUWantToUse}} this one

Saad Abbasi Over a year ago

Now problem is that there are many courses attached with one teacher i want to display course title and session name and semester name of each registered course of particular teacher ? so how can i achieve that

Alann Over a year ago

and with the second example ?

Alann Over a year ago

Oh then juste add the ? Before courses, it specify an optional variable which might not be initialized

|

Umair Latif · Accepted Answer · 2019-11-29 15:53:53Z

0

actually courses is array type you can have in your desired html tag I.E

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

answered Nov 29, 2019 at 15:53

Umair Latif

5284 silver badges6 bronze badges

1 Comment

Saad Abbasi Over a year ago

what do you mean trackByValueYouWant please guide me how to use

Collectives™ on Stack Overflow

How to bind incoming values with angular view using reactive form?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related