How to fetch data from API in ng2 smart table?

Question

I have an angular app using Ng2 smart table and need to fetch data from API I create a method to fetch data from API (but I didn't know it works or not ) and the main problem is how to get data to show in ng2 smart table Following is my HTML code

 <div class="mainTbl">
            <ng2-smart-table [settings]="settMain" [source]="dataMain"></ng2-smart-table>
        </div>

my service .ts


@Injectable({
  providedIn: 'root'
})
export class ClientsService {

  url="http://localhost:21063/api/clints"
  clients:Clients[];

  constructor(private http:HttpClient) { }

  getAllClients(){
    this.http.get(this.url).toPromise().then(
      res=>{
        this.clients = res as Clients[];
      }
    )

  }
}

component .ts :

export class ClientInfoComponent implements OnInit {

  // start main stores tbl
  settMain = {
    noDataMessage: 'عفوا لا توجد بيانات',

    actions: {
      columnTitle: 'إجراءات',
      position: 'right',
    },
    pager: {
      perPage: 25,
    },
    add: {
      addButtonContent: '  إضافة جديد ',
      createButtonContent: '',
      cancelButtonContent: '',
    },
    edit: {
      editButtonContent: '',
      saveButtonContent: '',
      cancelButtonContent: '',


    },
    delete: {
      deleteButtonContent: '',
    },

    columns: {
      index: {
        title: 'مسلسل',
        width: '80px',
      },
      id: {
        title: 'كود العميل',
        width: '80px',
      },
      name: {
        title: 'اسم العميل',
        width: '160px'
      },
      phone: {
        title: ' الهاتف'
      },
      address: {
        title: ' العنوان'
      },
      nots: {
        title: 'ملاحظات'
      }
    }
  };
  dataMain = [
    {
      index:1,
      id:"",
      name: "",
      phone:"",
      address: "",
      nots: "",
    }

  ];
  // end main stores tbl

  private myForm: FormGroup;

  constructor(private formBuilder: FormBuilder,private Service:ClientsService) { }


  ngOnInit() {

    this.Service.getAllClients();

  }

so I need some help to get data and how to but it in component .ts dataMain array, thanks in advance and excuse me because I'm a beginner.

[related issue and workarround](https://github.com/akveo/ng2-smart-table/issues/76) — jitender, Sep 19 '19 at 07:43
Your service not return nothing and you don't set dataMain nothing — Can Karakoyun, Sep 19 '19 at 07:53
thanks a lot for your support and can you show me how I do it in my example? — Mohamed Elkast, Sep 19 '19 at 07:54

score 0 · Accepted Answer · answered Oct 01 '19 at 17:15

0

[source]="dataMain" from your html template needs to be set to whatever Array you are fetching from the API.

I'm assuming you want your Client data to show, as the function

getClientData() appears to be returning an array of clients:

 getAllClients(){
    this.clients = this.http.get(this.url).toPromise().then(
      res=>{
        // you assigned the array to the value this.clients below
        this.clients = res as Clients[];
      }
    )

  }

your HTML settings should have [source]="this.clients" instead of dataMain, since this.clients is the variable that holds the list you want to show.

answered Oct 01 '19 at 17:15

mcadio

737
7
27

OK i got it and i have another question : – Mohamed Elkast Oct 02 '19 at 02:40
which one the best performance (promise or observable with RXJS )what's your advice? – Mohamed Elkast Oct 02 '19 at 03:07
I wish I knew, but alas I'm a very much newbie. I like using this.clients = this.http.get(this.url).toPromise() as it comes back nicely when I'm using async functions, and I don't know how to do it any other way. If you're using typing, you can set this.clients: Clients[]; near the top of the class instead of doing it inside the .then() (I think). – mcadio Oct 02 '19 at 18:07

score 0 · Answer 2 · answered Mar 04 '22 at 13:38

0

public getclients():Observable<any[]> { return this.http.get<any[]>(this.url) .pipe( //catchError(this.handleError<client[]>('getclients', []))

  // catchError(this.handleError)
 );

}

answered Mar 04 '22 at 13:38

raoul happi

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 04 '22 at 13:47

How to fetch data from API in ng2 smart table?

2 Answers2