CODEWITHSUNDEEP
htmlarraysangulartypescript
Saad Abbasi
Saad Abbasi

Reputation: 853

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

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?

Upvotes: 0

Views: 28

Answers (2)

Alann
Alann

Reputation: 657

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

Upvotes: 1

Umair Latif
Umair Latif

Reputation: 528

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>

Upvotes: 0

Related Questions