Angular 2 Load data through server API : data.slice error

Question

Im trying to load the data from my API to custom component using Angular2 ng Smart table plugin.

AS per their documentation (https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/basic-example-load.component.ts)

i have my component like:

import { LocalDataSource } from 'ng2-smart-table';
import { ProductService } from '../../../services/product.service';

export class CategoryItemsComponent implements OnInit {

...
 source: LocalDataSource;

 constructor(private productService: ProductService,
             private flashMessage: FlashMessagesService,
             private router: Router,
             http: Http) {
       this.source = new LocalDataSource();

      this.productService.getProductsOncategory(this.categoryid).subscribe((data) => {
      this.source.load(data);
   });

}

ProductService .ts

getProductsOncategory(category_id) {

let catUrl = "http://localhost:5000/products/getProductsOncategory"
let headers = new Headers();
headers.append('Content-Type', 'application/json');
let catIdObj = JSON.stringify({ category_id: category_id })
return this.http.post(catUrl, catIdObj, { headers: headers })
 .map((response: Response) => response.json())
  .do(data => console.log(JSON.stringify(data)))
  .catch(this.handleError);
}

The above API used in the service function works perfect in my postman.

Now i need to load the dame data from that API into my custom component.

I am getting this error:

ERROR TypeError: this.data.slice is not a function

at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.getElements (http://localhost:4200/1.chunk.js:22280:30) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.emitOnChanged (http://localhost:4200/1.chunk.js:22185:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.load (http://localhost:4200/1.chunk.js:22105:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.load (http://localhost:4200/1.chunk.js:22243:38)

score 1 · Answer 1 · answered Jul 20 '17 at 09:44

Ok i got it by using like:

source: LocalDataSource;

constructor(private productService: ProductService,
            private flashMessage: FlashMessagesService,
            private router: Router,
            http: Http) 
{
   this.source = new LocalDataSource();
}

onChange(categoryid) {
this.productService.getProductsOncategory(categoryid).subscribe(data => {
  if (data.success) {
    this.source.load(data.products);
    console.log('Products obtained');
  } else {
    console.log('Not obtained!');
  }
});

}

llotall · Answer 2 · 2017-07-31T09:17:35.893

Had the same problem. It solved when i check all match columns and add the missing in table data. For example i delared a variable

Settings = { 
....
columns: {
    id: {
    title: 'id',
    show: false,
    type: 'string',
  },
  name: {
    title: 'name',
    type: 'string',
  },
  //compare columns in json response in same variable declaration
  //for your data table [source]
 }
}

And in second case your table try get data from dataTableSource before full data loading, to avoid this use setTimeout(); method and set more time. For Example:

getChildData(): Promise<any> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(this.childsList);
        }, 4000);//<= increase this value
    });
}

excuse me for my english))

Angular 2 Load data through server API : data.slice error

2 Answers2