CODEWITHSUNDEEP
angular
user12142719
user12142719

Reputation:

not able to view data in html in angular7

I am trying to fetch data from web service, I am using Observable for that, I am getting response from web API but result are not displaying on html.

following is my services.ts

getForeports(searchText: string): Observable<FoReport[]> {
   return this.http.get(Constant.API_URL + 'getFoReports.php?searchText=' + encodeURIComponent(searchText))
   .pipe(map(result=>result['data']))
 }

following is my component.ts code

import { FoReport } from '../../models/report';

reports: FoReport[] = [];

getDataUsingObservable() {
    this.reportservice.getForeports(this.filterText).subscribe(
        (response: any) => {
            this.reports = response.statistics;
            console.log(this.reports);
        });
}

following is my API response

(2) [{…}, {…}]
0: {State: "Karnataka", SurveyorName: "Keval Kakdiya", NoOfInt: "2", SampleReceived: "2", CancelledEntries: "0", …}
1: {State: "MAHARASHTRA", SurveyorName: "Keval Kakdiya", NoOfInt: "0", SampleReceived: "0", CancelledEntries: "1", …}

following is my HTML code

Hide Copy Code

<tr *ngFor="let report of reports">
    <td> {{report.name}}            </td>
    <td> {{report.formSubmited}}    </td>
    <td> {{report.formCancelld}}    </td>
    <td> {{report.formApproved}}    </td>
    <td> {{report.formDisApproved}} </td>
    <td> {{report.state}}</td>
    <td> </td>
</tr>

Upvotes: 0

Views: 78

Answers (2)

Sachin Shah
Sachin Shah

Reputation: 4533

Please make sure you read the data correctly. 

<td> {{report.State}}</td>

As you haven't post whole object.

Upvotes: 1

Saksham
Saksham

Reputation: 9390

I see that your response keys are not matching with that of the ones you have used in your template. For example, you have State in your response where as you are using state

In order to check whether you have the response as needed in the template, try to lo it in the template as 

{{ reports | json }}

and cross-check the properties you are using in your template.

Upvotes: 0

Related Questions