Comments (21)
@gvital3230 The way how I did it so far
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class ApiService {
public token: string;
private endpoint: string = 'MYENDPOINT';
constructor(private http: Http) {}
private process(response:Response) {
let json = response.json();
if (json && json.errorMessage) {
throw new Error(json.errorMessage);
}
return json;
}
private processError(error: any) {
let
errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
getHeaders() {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
if(this.token) {
headers.append('Authorization', this.token);
}
return {
headers: headers
};
}
get(url) {
return this
.http
.get(this.endpoint + url, this.getHeaders())
.toPromise()
.then(this.process)
.catch(this.processError);
}
post(url, data) {
return this
.http
.post(this.endpoint+ url, data, this.getHeaders())
.toPromise()
.then(this.process);
}
put(url, data) {
return this
.http
.put(this.endpoint+ url, data, this.getHeaders())
.toPromise()
.then(this.process)
.catch(this.processError);
}
apiURL(magazine) {
return this.endpoint
}
delete(url) {
return this
.http
.delete(this.endpoint+ url, this.getHeaders())
.toPromise()
.then(this.process)
.catch(this.processError);
}
setToken(token) {
localStorage.setItem('ssid', token);
this.token = token;
}
}
and then my source
import {Injectable} from '@angular/core';
import {ApiService} from '...';
import {LocalDataSource} from '...';
@Injectable()
export class MyTableLoadSource extends LocalDataSource {
busy: Promise<any>;
constructor(private api:ApiService) {
super(null);
}
getElements(): Promise<any> {
this.busy = new Promise(resolve => {});
return this.api
.get('SOMERESOURCE')
.then(data => this.data = data);
}
}
Later you can extend it by filtering etc other ideas about your API. It's not basing on latest version of code, so guys might simplified few things already.
from ng2-smart-table.
Hey Guys, we released a beta version of the server data source under '0.4.0-2' version. Here https://github.com/akveo/ng2-smart-table/blob/master/demo/src/app/pages/demo/components/advanced-example-server.component.ts you can find an example of how to implement it, and here https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-source/server/server-source.conf.ts#L22 a list of configurations available for the server data source.
Please let us know if you have any questions and your feedback is much appreciated.
from ng2-smart-table.
I have the above working but I'm still unable to set the pagination based on the response from the API, is this possible? i.e. set a total and page from the API so that large datasets can be partially loaded for performance?
from ng2-smart-table.
Hi, in case it helps others too, I initially got slightly misled by @nnixaa's post from 26th Oct 2016 and thought that the ServerDataSource was only in a beta branch of the code (0.4.0-2) but I've realised it's in the main branch, with a live demo (second example at that link) and demo source (slightly different link from before). I am pretty sure that I've understood correctly that it's still a beta feature, though?
I was also wondering, would be possible to customise ServerDataSource to the user's own API by providing callbacks to allow the user to modify things just before the http call and to extract things (i.e. total rows and data objects) afterwards? (That works for customising server-side autocomplete callbacks in the Select2 library, which I've used.)
from ng2-smart-table.
@nnixaa that is a good point. From what I found is that LocalDataSource is a far better example than ServerDatasource. The second is too opinionated for me. It would be nice to expose DataSource, so I don't have to extend LocalDataSource (but I can live with that). If you go further with LocalDataSource you need to add easy support for headers, as mostly authentication (like with JWT) will require it.
from ng2-smart-table.
+1 for headers support, it would be very helpful
from ng2-smart-table.
I'm trying to add total record count fetched from my first API call when the page loads initially. Based on the count I will come to know the total number of pages, and in turn based on the page click will fire appropriate API calls to populate data. Is this possible using NG2-Smart-Table? I am planning to write my own custom component for pagination and do the above task.
from ng2-smart-table.
I also face this issue, and I find that the default implementation of DataSource is LocalDataSource, so we can implement a RemoteDataSource to fetch and filter the records from the server side, is it right?
from ng2-smart-table.
I notice that "Local data source (Server/API DataSource is on its way)" in the wiki, is there any timeline of this feature?
from ng2-smart-table.
+1
from ng2-smart-table.
+1
from ng2-smart-table.
I think you shouldn't create API adapter that assumes what would be API interface. ServerDataSource you created is a good example, but as there is no single version of proper REST API, or maybe someone would like to use Falcor or GraphQL, there is no point implementing specific API interface. Better if you made proper documentation of writing on DataSource.
from ng2-smart-table.
Hi @sielay, we definitely thought of it, that there is no standardised version of REST API and moreover there are plenty of other API interfaces.
But anyway, we decided to create this one for two cases:
- when a user doesn't have API and could develop it in the format suggested by the library, and then just turn the ng2-smart-table on with no (or with minor) modifications.
- secondly working server data source is a good example (as you noticed) of creating your own.
The current version is still in the development and there is a list of modifications we need to make, but at least it gives a general idea on how to create your own API data source version for your needs.
Let us know your thoughts.
from ng2-smart-table.
@sielay tried your code but am getting following error
EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'get' of undefined
can you please tell me what is the error, am creating a another parameter in get() for APIService and passing it in componenets
Code modified APIService
get(url,request) {
return this
.http
.get(this.endpoint + url,request, this.getHeaders())
.toPromise()
.then(this.process)
.catch(this.processError);
}
App.Component
getElements(): Promise {
this.busy = new Promise(resolve => {});
return this.api
.get('http://helloApi:88/api/path/GetReviewList',JSON.stringify({"VendorID": 1}))
.then(data => this.data = data);
}
from ng2-smart-table.
@DeveBj
You need to add
import {ApiService} from '...';
and
constructor(private api:ApiService) {
super(null);
}
from ng2-smart-table.
@daveykane Were you able to do that? Can you please share an example.
from ng2-smart-table.
did anyone got the solution??
from ng2-smart-table.
I wrote a custom datasource to use with loopback.
It's my first implementation:
import { BaseLoopBackApi, LoopBackFilter } from '../client/sdk';
import { map } from 'rxjs/operators';
import { LocalDataSource } from 'ng2-smart-table';
export class LoopbackDataSource extends LocalDataSource {
protected lastRequestCount: number = 0;
constructor(protected api: BaseLoopBackApi, protected columns: Object, protected idName: string = 'id') {
super();
}
prepend(element: any): Promise<any> {
return this.api.create(element).pipe(map(res => {
return super.prepend(res);
})).toPromise();
}
add(element: any): Promise<any> {
return this.api.create(element).pipe(map(res => {
return super.add(res);
})).toPromise();
}
update(element: any, values: any): Promise<any> {
return new Promise((resolve, reject) => {
this.api.updateAttributes(element[this.idName], values).subscribe((result) => {
// it's a nice trick from https://github.com/akveo/ng2-smart-table/issues/195#issuecomment-311799579
element = Object.assign(element, result);
this.emitOnUpdated(element);
this.emitOnChanged('update');
resolve();
}, err => {
reject(err);
});
});
}
remove(element: any): Promise<any> {
return this.api.deleteById(element[this.idName]).pipe(map(res => {
return super.remove(element);
})).toPromise();
}
count(): number {
return this.lastRequestCount;
}
getElements(): Promise<any> {
let filter = this.addSortRequestParams({});
filter = this.addFilterRequestParams(filter);
filter = this.addPagerRequestParams(filter);
this.api.count(filter.where).subscribe((result) => {
this.lastRequestCount = result.count;
});
return this.api.find(filter).pipe(map(res => {
this.data = res;
return this.data;
})).toPromise();
}
protected addSortRequestParams(filter: LoopBackFilter): LoopBackFilter {
if (this.sortConf) {
const order = [];
this.sortConf.forEach((fieldConf) => {
order.push(fieldConf.field + ' ' + fieldConf.direction.toUpperCase());
});
filter.order = order;
}
return filter;
}
protected addFilterRequestParams(filter: LoopBackFilter): LoopBackFilter {
if (this.filterConf.filters) {
const where = {};
this.filterConf.filters.forEach((fieldConf: any) => {
if (fieldConf['search']) {
if (this.columns[fieldConf['field']].type === 'string') {
where[fieldConf['field']] = { like: fieldConf['search'], options: 'i' };
} else {
where[fieldConf['field']] = fieldConf['search'];
}
}
});
filter.where = where;
}
return filter;
}
protected addPagerRequestParams(filter: LoopBackFilter): LoopBackFilter {
if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) {
filter.skip = this.pagingConf['page'] - 1;
filter.limit = this.pagingConf['perPage'];
}
return filter;
}
}
from ng2-smart-table.
I notice that "Local data source (Server/API DataSource is on its way)" in the wiki, is there any timeline of this feature?
I have impletement Server side data source . and it is working finely, pagination is also working, just facing issue with filtering data in my ng2-smart-table.
from ng2-smart-table.
Anyone here could tell me how can I make pagination using ng2 smart table and graphql ?
from ng2-smart-table.
I notice that "Local data source (Server/API DataSource is on its way)" in the wiki, is there any timeline of this feature?
I have impletement Server side data source . and it is working finely, pagination is also working, just facing issue with filtering data in my ng2-smart-table.
how could you resolve it pleasae ?
from ng2-smart-table.
Related Issues (20)
- ServerDataSource: API error Handling
- Any way to send some data to custom filter component?
- How to Make table scrollable vertically (left to right) if we are using n2-smart-table?
- How to show or hide a tag in the column tags in ng2-smart-table
- Issue while using in Angular 14 HOT 2
- Allow providing static row classes
- Access to Documentation for Old versions
- valuePrepareFunction not parsing JSON on EDIT
- How can I get the index of current page
- Column list elements are not visible HOT 1
- Table not work when I refresh page HOT 2
- Is it possible create a custom list filter of a column in my smart table? HOT 1
- How to add CSS class to ng2-smart-table <td> ?
- How to get the row element? HOT 1
- SetFilter() and SetPaging() are not Working Properly
- I am using ng2 smart table library ad when i clicked on edit than one column is editable rest column is not editable. before click on the edit button data is displayed in the all columns but after click on that some column fields are empty. How can I resolve this issue in ng2 smart table. I am sharing my angular code.
- Support for Angular 15.x
- Is there a way to combine AND and OR operators in the setFilter function?
- Support for Angular 17.x
- Support for Angular 17.x HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-smart-table.