How to bind JSON in Template using RESTAPI in Angular 7

Question

Hi I am learning Angular 7 but stuck at some point. I have a Fake Rest API (GET) and i am using this api to get User Data in my Component and finally bind this data in my HTML Page but it seems no data is available in HTML but i am receiving the data in Component. I have three files: 1. Component.service 2. Component.ts 3. Component.html

I have already tried to call GetAllAppData in ngOnIt method but no success data is received in component but not populated in HTML

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HomeService {
    url1 = 'http://dummy.restapiexample.com/api/v1/employees';

    constructor(private httpClient: HttpClient){

    }



    public getAll(){

        return this.httpClient.get<any[]>(`${this.url1}`);
    }


}

import { Component } from '@angular/core';
import { Router }  from '@angular/router';  
import { FormsModule } from '@angular/forms';
import {HomeService} from './home.service';


@Component({
  templateUrl:'./home.component.html' ,
  styleUrls: ['./home.component.less'],
  providers : [HomeService]
})
export class HomePageComponent{

    policies:any = [];
    constructor(private homeService:HomeService){

    }

    public GetAllAppData(){
        this.homeService.getAll().subscribe(function(resp){
               if(resp){
                this.policies =resp;
                console.log(this.policies);
                }
        })
    }

    ngAfterViewInit() {
    this.GetAllAppData()
    }
    ngOnInit() {

    }

}

<div class="row col-md-12 col-xs-12">
    <div class="panel">
            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Organisation</th>
                            <th>Total Users</th>
                            <th>Subscribed Users</th>
                        </tr>
                    </thead>
                    <tbody *ngIf="policies.length>0">
                        <tr *ngFor="let comment of policies">
                            <td> 
{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                        </tr>

                    </tbody>
                </table>
            </div>


    </div>
</div>

Brynnlow · Accepted Answer · 2019-04-08 07:48:07Z

1

what if you use arrow function ?

function(resp){
           if(resp){
            this.policies =resp;
            console.log(this.policies);
            }
    }

become

(resp) => {
               if(resp){
                this.policies =resp;
                console.log(this.policies);
                }
        }

answered Apr 8, 2019 at 7:48

Brynnlow

364 bronze badges

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

2 Comments

Rachit Sharma Over a year ago

Yes it is working now, just one question is there any difference in arrow function and in normal functions?

Brynnlow Over a year ago

yes function () {} have is own this, then arrow function have this like you want

Collectives™ on Stack Overflow

How to bind JSON in Template using RESTAPI in Angular 7

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related