CODEWITHSUNDEEP
angular
user7345776
user7345776

Reputation:

Fetching data from database into angular datatable

I have some data stored in my database which i want to fetch and place in my angular datatable, but it doesn't work out and i can't find the reason why. Although, the instances i create in the constructor show up in my angular table, but i want to be able to request the stored data in my database into my angular datatable. Thanks!

customer.ts file

import {Component, OnInit} from '@angular/core';
import {HttpService} from "./Client_Service";
import {Response} from '@angular/http';

@Component({
  selector: 'client',
  templateUrl:'client_table.html',
  providers:[HttpService]


})

  export class ClientComponent{

  welcome: string;
  clients: [{
     Name: string,
     Email: string,
     Company: string

  }];

  constructor(){
    this.welcome = "Customer Listing"
    this.clients = [{
      Name: "John Jan",
      Email:"example.com",
      Company: "Metabo"
    }

    ]

  };



   customers:Customer[];

   constructor(private httpService: HttpService){}

  ngOnInit(){


    this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => console.log(data.json())
      );

  }




}

// My angular datatable

<h1>{{welcome}}</h1>
<table class="table">

  <tr>
    <th>#</th>
    <th> Name</th>
    <th>Email</th>
    <th>Company</th>



 </tr>
    <tr *ngFor="let client of clients; let i = index">
      <td>{{i + 1}}</td>
      <td>{{client.Name}}</td>
      <td>{{client.Email}}</td>
      <td>{{client.Company}}</td>

    </tr>


</table>

// Http service 

import {Injectable} from '@angular/core';
import {Response, Http} from '@angular/http';
  import {DataListModule} from 'primeng/primeng';


@Injectable()

 export class HttpService{

  constructor(private http:Http){

  }

   getCustomer(){
     //using get request
     return this.http.get('http://localhost:9000/api/crm_api/v1/customers')
       .map((response: Response) => response.json())



   }





}

Upvotes: 1

Views: 1957

Answers (1)

eko
eko

Reputation: 40647

If 

 this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => console.log(data.json())
      );

is working, all you have to do is:

 this.httpService.getCustomer()
      .subscribe(
        (data: Response ) => {
          console.log(data.json())
          this.clients = data;
       }
      );

Upvotes: 3

Related Questions