Passing Selected Table Row Model Data to Backend in Angular 7

Question

Passing Selected Table Row Model Data to Backend in Angular 7

My goal is to send the selected data in a table row, which I select through a checkbox, to the server. However, I'm unsure about how to handle this via a service call. While I have the basic structure in place, I need assistance with sending the items for a delete REST API call. The server endpoint for this service call is a C# .Net Core JSON.

CustomComponent.ts

@Component({
  templateUrl: 'CustomComponent.html'
})
export class CustomComponent implements OnInit, OnDestroy {

  // User Fields
  currentUser: User;
  users: User[] = [];
  currentUserSubscription: Subscription;

  loading : boolean;
  // Action Fields
  viewData: any;
  viewName: string;
  refNumber: number;
  currentActionSubscription: Subscription;
  displayedColumns: string[] = [];
  dataSource: any = new MatTableDataSource([]);
  pageSizeOptions: number[] = [10, 20, 50];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  selection = new SelectionModel<TableRow>(true, []);

  defaultSort: MatSortable = {
    id: 'defColumnName',
    start: 'asc',
    disableClear: true
  };

  ...

}

javascript angular typescript observable angular7

Answer 1

Answer №1

Two essential tasks need to be addressed in your current code:

You must send the ids of the selected rows back to the server, usually done through the URL in a DELETE request.
You need to subscribe to the observable to materialize it. The HTTP request won't execute without any subscribers. Ideally, the component should make a service call like this:

this.actionService.deleteRow(this.selection).subscribe((response) => {
  console.log('Success!');
});

Update:

Regarding task number 1, the implementation will depend on how your server method is set up. If it requires an array of numeric IDs, the view.service.ts may resemble the following:

deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
  console.log('testing service');
  // create an array of query parameters using the property that identifies a table row
  const queryParams = selection.selected.map(row => `id=${row.id}`);
  // include the query parameters in the URL
  const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
  return this.http.delete<any>(url);
}

I'm making assumptions about how you send information about table rows to your server. If you're still facing challenges, provide more details about the DELETE endpoint.

Update 2:

With better insight into the object structure...

deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
  console.log('testing service');
  // create an array of query parameters using the property that identifies a table row
  const queryParams = [...selection._selection].map(row => `id=${row.id}`);
  // include the query parameters in the URL
  const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
  return this.http.delete<any>(url);
}

Answer 2

Two essential tasks need to be addressed in your current code:

You must send the ids of the selected rows back to the server, usually done through the URL in a DELETE request.
You need to subscribe to the observable to materialize it. The HTTP request won't execute without any subscribers. Ideally, the component should make a service call like this:

this.actionService.deleteRow(this.selection).subscribe((response) => {
  console.log('Success!');
});

Update:

Regarding task number 1, the implementation will depend on how your server method is set up. If it requires an array of numeric IDs, the view.service.ts may resemble the following:

deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
  console.log('testing service');
  // create an array of query parameters using the property that identifies a table row
  const queryParams = selection.selected.map(row => `id=${row.id}`);
  // include the query parameters in the URL
  const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
  return this.http.delete<any>(url);
}

I'm making assumptions about how you send information about table rows to your server. If you're still facing challenges, provide more details about the DELETE endpoint.

Update 2:

With better insight into the object structure...

deleteRow(selection: SelectionModel<TableRow>): Observable<{}> {
  console.log('testing service');
  // create an array of query parameters using the property that identifies a table row
  const queryParams = [...selection._selection].map(row => `id=${row.id}`);
  // include the query parameters in the URL
  const url = `http://localhost:15217/actions/deleteRow?${queryParams.join('&')}`;
  return this.http.delete<any>(url);
}

Passing Selected Table Row Model Data to Backend in Angular 7

Answer №1

Similar questions

utilizing parent scope in a jQuery function callback

unable to use ref to scroll to bottom

Ways to fix the perpetual cycle in adal-angular4 following authentication redirect

Is there a way to determine the number of clicks on something?

Ways to modify, delete, or insert data elements within a collection of values using React

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

What steps should I take to resolve the 'invalid mime type' issue while transmitting an image as a binary string to Stability AI via Express?

What causes certain webpack / Babel ES6 imports without a specified extension to resolve as "undefined"?

Retrieving ng-repeat object in Angular

My backend axios post request is not returning any data to my external API. What could be the issue?

Is it possible to reverse the use of JQuery's .each() function without any additional plugins or modifications?

Angular 2 cleaning up subscriptions when view is destroyed

determining the properties of a given data type

Is it permissible to use Aloha editor GPL v.2 on a business website?

Convert JavaScript object into distinct identifier

The synchronization of template stamping with the connectedCallback function

Ways to retrieve the locale parameter from the URL in Next Js

I attempted to access data from the phpmyadmin database, but the browser is displaying an error message stating "cannot get/employee", while there are no errors showing in the command prompt

Tips for concealing the ID value within a URL or parameter

Steps for inserting an item into a div container