Get list data api using angular4

Question

I am in problem with get api, here is student_name in api student. Here is my code I tried

Api { "error": null, "result": [{"id": 1, "student_name": "Alex" }, {"id":2, "student_name": "Bob"}] }

Typescript: student.service.ts

listStudent(){
    return this.http.get('api/student')
      .map(HttpHandle.extractData.bind(null, 'list student'))
      .catch(HttpHandle.handleError)
  }

extractDate method in http-handle.ts:

public static extractData(name: string, res: Response): Observable<Response> {
    if (res.status < 300) {
      console.log(`%c# Response status ${res.status}, ${name}, ${res.arrayBuffer().byteLength} bytes`,
        'color: #00CC00; font-weight:bold;');

      if (printDetail) {
        console.groupCollapsed('\tResponse');
        console.log(`${JSON.stringify(res, null, 2)}`);
        console.groupEnd();
      }
    }
    else {
      console.log(`%c# Response status ${res.status}, ${name}, ${res.arrayBuffer().byteLength} bytes`,
        'color: #CC0000; font-weight:bold;');
      console.groupCollapsed('\tResponse');
      console.log(`${JSON.stringify(res, null, 2)}`);
      console.groupEnd();
    }

    return res.json();
  }

My Component: student.component.ts

export class StudentComponent{
lstStudent: string[];// I think something went wrong
public student_name: string;
....
constructor(
  private studentService: StudentService,
  ) { }
....
getStudents(){
    this.studentService.listStudent()
      .subscribe(data =>{
        this.lstStudent = data['lstStudent'];
        this.student_name = this.lstStudent...;//This is my issue 
      }
  );
  }

Html

<select class="form-control" title="list Student"
                 [(ngModel)]="lstStudent" name="lstStudent">
 <option *ngFor="let x of lstStudent" [ngValue]="x.student_name">{{x.student_name}}
 </option>
</select>

So how to get student_name and use it for HTML in select tag. Thank you.

Your json object is incorrect it should be array [{"id": 1, "student_name": "Alex" }, {"id":2, "student_name": "Bob"}] for iterate in ngFor. — hrdkisback
– hrdkisback, Commented Aug 3, 2017 at 10:56
I declare it is a array as above, but l think it's incorrect. — Sherry
– Sherry, Commented Aug 3, 2017 at 11:25

Nour · Accepted Answer · 2017-08-03 12:14:24Z

2

In your component typescript file:

private selectedStudentId:number;

this.studentService.listStuden().subscribe(data => {
               this.lstStudents = data['result'];
               this.selectedStudentId = this.lstStudents[0].id;
});

and in your html file:

<select class="form-control" [(ngModel)]="selectedStudent">
    <option *ngFor="let student of lstStudents" value="{{student.id}}">
            {{student.name}}</option>
</select>

answered Aug 3, 2017 at 12:14

Nour

5,9293 gold badges23 silver badges24 bronze badges

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

Comments

Niladri · Accepted Answer · 2017-08-03 12:58:37Z

1

There are some issues in your code

1. in your student.component.ts declare lstStudent like below

    lstStudent: any[];// change it to any[]

2.  subscribe to the Observable like below in the getStudents() method

    this.studentService.listStudent()
    .subscribe(data =>{
    this.lstStudent = data.result;
      }
    );
  }

3. in your HTML, change the ngModel name to something like "StudentList" to avoid confusion with the lstStudent variable returned from service. You can get selected value from this ngModel name. I have used [value] property binding here.

<select class="form-control" title="list Student"
                 [(ngModel)]="StudentList" name="StudentList">
 <option *ngFor="let x of lstStudent" [value]="x.student_name">{{x.student_name}}
 </option>
</select>

let me know if it works. Also can you post it your code for the extractData method in your service as used below

.map(HttpHandle.extractData.bind(null, 'list student'))

edited Aug 3, 2017 at 12:58

answered Aug 3, 2017 at 11:24

Niladri

5,9822 gold badges27 silver badges45 bronze badges

2 Comments

Sherry Over a year ago

thank you. Maybe something went wrong, it doesn't work, error is "Type '{}' is not assignable to type 'any[]'. I updated extractData method.

Niladri Over a year ago

i changed the code in listStudent() method as below . this.lstStudent = data.result; Can you post the value of res.json() in extractData method after logging in console.

Collectives™ on Stack Overflow

Get list data api using angular4

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related