ERROR TypeError: data.slice is not a function

Question

ERROR TypeError: data.slice is not a function
#atMatTableDataSource.push../node_modules/@angular/material/esm5/table.es5.js.MatTableDataSource._orderData (table.es5.js:742)

#at MapSubscriber.project (table.es5.js:675)
#atMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
#atMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

I am consuming a JSON response and attempting to display it in the UI through angular material mat-table. please find the attached snippet of code and let me know what is the mistake in the code which I have made or do I need to change my approach to achieve this

JSON webservice

{
"data": [
{
  "action": "Ok",
  "created_user": "slstst5",
  "latest_instance": 7713997,
  "modified_dt": "Thu, 12 Jul 2018 06:27:32 GMT",
  "no_of_btl": 159,
  "request": 238244193,
  "sales_rep": "slstst5",
  "status_cd": "Submitted to Prov."
},

Service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {sot} from './sot.model';
import { Observable } from "rxjs";

@Injectable({
providedIn: 'root'
})
export class SotServiceService {
private serviceUrl ="service URL";

constructor(private http : HttpClient) { }
getuser():Observable<sot[]>{
  return this.http.get<sot[]>(this.serviceUrl);
}
}

table.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from "rxjs";
import {MatSort, MatSortable, MatTableDataSource,PageEvent, MatPaginator} 
from '@angular/material';
import {SotServiceService} from '../sot-service.service';

@Component({
selector: 'app-sot-table',
templateUrl: './sot-table.component.html',
styleUrls: ['./sot-table.component.css']
})
export class SotTableComponent implements OnInit {
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator : MatPaginator;
dataSource;
//displayedColumns = ['id', 'name', 'username', 'email', 'phone', 'website'];
displayedColumns = ['request', 'status_cd', 'sales_rep', 'created_user', 
'modified_dt', 'action','no_of_btl'];
//displayedColumns=['userId','id','title','body']
constructor(private sotservice :SotServiceService) { }

ngOnInit() {
this.sotservice.getuser().subscribe(result => {

  if(!result){
    return ;
  }
  this.dataSource= new MatTableDataSource(result);
  this.dataSource.sort= this.sort;
  this.dataSource.paginator=this.paginator;
 })
 }

}

Error snapshot:

Answer 1

Your data object is inside of the result object. You will need to do the following:

ngOnInit() {
  this.sotservice.getuser()
    .subscribe(result => {
      if(!result){
        return;
      }

      this.dataSource= new MatTableDataSource(result.data);
      this.dataSource.sort= this.sort;
      this.dataSource.paginator=this.paginator;
  });
}

Answer 2

This happens sometimes when you are using the slice function on wrong data type. Slice works on an array, not an object. It might happen that you are trying to slice an object.

Answer 3

Happens because of you are trying to slice an object. Slice works on an array, not an object.