Grid Kendo Angular : ERROR TypeError: data.slice is not a function

[Kylian]

Hi,

It does few days that i can't resolve this error : ERROR TypeError: data.slice is not a function.

I try to print my data in a kendo grid and the error is always present.

In my other projects, i don't have the error in my grid.

Here is my code :

 

html :

<kendo-grid [kendoGridBinding]="traductionData" [filterable]="true" [resizable]="true" [sortable]="true" [pageable]=true [pageSize]="15" class="table">
  <kendo-grid-column field="Code" title="Code" [headerStyle]="{'background-color': '#082d61', 'color': '#ffffff', 'font-weight': 'bold'}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false">
      </kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-traduction>
      {{ traduction.Code }}
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="Francais" title="Français" [headerStyle]="{'background-color': '#082d61', 'color': '#ffffff', 'font-weight': 'bold'}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false">
      </kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-traduction>
      {{ traduction.Francais }}
    </ng-template>
  </kendo-grid-column>
  <kendo-grid-column field="Anglais" title="Anglais" [headerStyle]="{'background-color': '#082d61', 'color': '#ffffff', 'font-weight': 'bold'}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false">
      </kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-traduction>
      {{ traduction.Anglais }}
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

type-script :

import { Component, OnInit } from '@angular/core';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-grid-traductions',
  templateUrl: './grid-traductions.component.html',
  styleUrls: ['./grid-traductions.component.scss']
})
export class GridTraductionsComponent implements OnInit {

  traductionData !: any[];

  constructor(private api: ApiService) { }

  ngOnInit(): void {
    this.getLesTraductions();
  }

  getLesTraductions(){
    this.api.getAllTraductions()
    .subscribe(res=>{
      this.traductionData = res;
      console.log(this.traductionData)
    })
  }

}

my api-service :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

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

  localUrlAPI: string = environment.urlAPI;

  constructor(private http : HttpClient) { }

  getAllTraductions(){
    return this.http.get<any>(this.localUrlAPI+"GetAllTraductions")
    .pipe(map((res:any)=>{
      return res;
      console.log(res);
    }))
  }
}

 

Thx for the time.