why my delete function not work on my table for second time

Issue

I don't know why The delete function does not work properly The first time the line is deleted correctly, but for the second time when I want to delete a record, I encounter the following error:

localhost:4200 says :this.dataArray.filter is not a function

thank you so much for you help

my ts file is:

export class PersonsComponent implements OnInit {
  private subs = new Subscription();
  private dataArray: any;
  dataSource = new MatTableDataSource<Element>()

  constructor(private financeService: ApiServiceService,public dialog: MatDialog) { }
  displayedColumns: string[] = ['position', 'name', 'username', 'email','address', 'action'];

 // none value
 filterValues = {
  name: ''
};

// form group
filterForm = new FormGroup({
  name: new FormControl()
});

get name() {
  return this.filterForm.get('name');
}
openDialog(action: any,obj:  any) {
  obj.action = action;
  const dialogRef = this.dialog.open(DialogBoxComponent, {
    width: '350px',
    data:obj
  });

  dialogRef.afterClosed().subscribe((result: { event: string; data: any; }) => {
     if(result.event == 'Delete'){
      this.deleteRowData(result.data);
    }
  });
}

 deleteRowData(row_obj: { id: number; }){

  this.dataArray = this.dataArray.filter((value: any, key: any) => {
    return value.id != row_obj.id;
  });

  this.dataSource.data = this.dataArray;

  this.subs.add(this.financeService.deleteUsers(row_obj.id)
  .subscribe((res) => {
    this.dataArray = res;

  },
  ));

    }

  @ViewChild(MatSort, { static: false })
  sort!: MatSort;
  @ViewChild(MatPaginator) paginator !: MatPaginator;


  ngOnInit() {
      this.subs.add(this.financeService.getRandomUsers()
        .subscribe((res) => {
          this.dataArray = res;
          this.dataSource = new MatTableDataSource<Element>(this.dataArray)
          this.formSubscribe();
          this.getFormsValue();
        },
        ));
    }

    // form subscribe
    formSubscribe() {
      if (this.name !=null){
       this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      this.name.valueChanges.subscribe(nameValue => {
        this.filterValues['name'] = nameValue;
        this.dataSource.filter = JSON.stringify(this.filterValues);

      });
    }
    }
    // create filter
    getFormsValue() {
      this.dataSource.filterPredicate = (data: any, filter: string): boolean => {
        let searchString = JSON.parse(filter);

        const resultValue =
          data.name.toString().trim().toLowerCase()
            .indexOf(searchString.name.toLowerCase()) !== -1;
        return resultValue;
      };
      this.dataSource.filter = JSON.stringify(this.filterValues);
    }
}

and my service.ts is

import { Injectable } from '@angular/core';
import { Observable,throwError } from 'rxjs';
import { HttpClient,HttpHeaders }    from '@angular/common/http'
import { FormBuilder } from '@angular/forms';
import { retry, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiServiceService {
  constructor(private http: HttpClient ) { }
 getUsers(): Observable<Element> {
  const URL = 'http://192.168.1.110:8282/api/Person_api/ ';
  return this.http.get<Element>(URL).pipe(
    retry(0),
   // catchError(this.handleError)
  );
 }


deleteUsers(id: number): Observable<Element> {
  const URL = 'http://192.168.1.110:8282/api/DeletePerson/' + id.toString();
  return this.http.get<Element>(URL);
 }
}

Solution

it seems ApiService::deleteUsers() returns something which is not an array (I guess it is some object)

here you are replacing the array with this object so when it gets to run the second time dataArray contains not an array

 this.subs.add(this.financeService.deleteUsers(row_obj.id)
  .subscribe((res) => {
    this.dataArray = res;
  },
  ));

Answered By - icekson