Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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:
                True as mentioned above, but that could be because you just got a snippet of your JSON (?) But the issue is also that your array is inside data property of your JSON, so I guess you just want the array...
– AT82
                Jul 12, 2018 at 12:46
                Yeah you are right I have attached a snippet of my JSON. Yes my array is inside the data property of JSON, I am trying to retrieve the values from the data Array and display it in the table
– Basha
                Jul 13, 2018 at 21:39
                {   "data": [     {       "action": "Ok",       "created_user": "ab28974",       "latest_instance": 7720104,       "modified_dt": "Fri, 13 Jul 2018 08:05:26 GMT",       "no_of_btl": 20,       "request": 238219884,       "sales_rep": "ab28974",       "status_cd": "Keying In Progress"     } ]}
– Basha
                Jul 13, 2018 at 21:40
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;
                I tried the (result.data) however I am getting the error "Property 'data' does not exist on type 'sot[]'."
– Basha
                Jul 13, 2018 at 21:35
                @BlueScoreMan What do you mean? Maybe post a new question on SO and tag me, include the json etc.
– Wesley Coetzee
                Apr 5, 2019 at 8:43
This error is due to the array returned by your webservice. 
result contains the array of data. To avoid data.slice is not a function error, you will need to point your result to result.data as mentioned by Wesley Coetzee.
You can safely remove observable from the service as well. If you are not sure about the Sot object, replace it with any or remove it
This error also occurs if you have sub-array in result.data as well. In that case you will do something like, 
this.dataSource = new MatTableDataSource(res.data.yourSubArray);

My observable stream returns data from local indexedDB storage (no backend), and my mistake was not checking array length of the stream parameter before assigning it to MatTableDataSource, which resulted in the same type error. Here is my fix: 
ngOnInit() {
   this.dataStream = this.storageService.getDataStream().subscribe((activeDataList: any) => { 
      if (activeDataList.length) { 
         this.dataSource = new MatTableDataSource(activeDataList);
Please try change this line this.dataSource = new MatTableDataSource(result); to    this.datasource.result = results['Data'] then have your dataSource initialized just outside of your constructor like dataSource = new MatTableDataSource();
What you'll basically doing here is to tell your code that there is an element named Data in my result so give me the value or data of this element and assign it to my data-source, hope it helps, had the similar issue and this is how I resolved it 
just make sure data is an array / list of your expected data for the table, otherwise won't be possible to slice.
simple
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.