Transfer a value to the ng2 smart table plugin extension

Upon reviewing the document and source code related to pagination implementation in the (advanced-example-server.component.ts), I discovered that the ServerDataSource being used only supported pagination through HTTP GET (_sort, _limit, _page, etc parameters expose in URL).... However, my current project necessitates using POST requests to send front-end parameters to back-end Restful APIs.

In order to address this issue, I attempted to implement an extension for HTTP post calls but encountered difficulties when it came to adding extra parameters in the pagination request. I found myself needing to pass the request_server object to the extendsplugin.ts.

import { Observable } from 'rxjs/internal/Observable';
import { ServerDataSource } from 'ng2-smart-table';

    export class PostServerDataSource extends ServerDataSource {

        protected requestElements(): Observable<any> {
            let httpParams = this.createRequesParams();
            return this.http.post(this.conf.endPoint, request_server, { observe: 'response' });
        }

    }

anotherComponent.ts

swiftListTable() {

        const request_server = { "userType": this.currentUser.role, "authName": this.currentUser.username }
        this.source = new PostServerDataSource(this.http,{endPoint: this.service.apiURL + 'swift/pagination', dataKey: 'content', pagerLimitKey:"_limit",
        pagerPageKey:"_page",
        sortDirKey: "pageable",
        sortFieldKey: "pageable",
        totalKey:'totalElements'});
      }

Answer №1

When it comes to handling parameters, there are a couple of approaches you can take. One method involves attaching the params in the query string and appending them to the URL like this:

this.service.apiURL + 'swift/pagination?param1=p&param2=q'

Alternatively, you could manage the parameters in the requestElements and swiftListTable functions as shown below:

swiftListTable() {

        const request_server = { 
           "userType": this.currentUser.role, 
           "authName": this.currentUser.username 
        }

       this.source = new PostServerDataSource(http, 
          { endPoint: url, dataKey: 'content', pagerLimitKey:'_limit'}, request_server);

export class PostServerDataSource extends ServerDataSource {

    params: any;

    constructor(http: HttpClient, config: any, params?: any) {
        super(http, config);
        this.params = params;
    }

    protected requestElements(): Observable<any> {
        let httpParams = this.createRequesParams();
        if (this.params) {
          let keys = Object.keys(this.params);
          keys.forEach((key) => {
              httpParams = httpParams.set(key, this.params[key]);
          });
        }
        return this.http.post(this.conf.endPoint, httpParams, { observe: 'response' });
    }

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling a nested scrollbar using JQuery

I am looking to customize two scrollbars using a jquery plugin or JS library. Here is the HTML code: <div id="container"> <div class="fixedHeightContainer"> <div class="fixedHeightContent"> Lorem ipsum dolor sit amet, con ...

Ways to convert an asynchronous operation to synchronous in JavaScript

Currently in the process of developing an eslint plugin, I have come across a particular issue. My goal is to implement real-time changes to the configuration file by making an HTTP request to retrieve the JSON configuration. When attempting to execute co ...

Fill the dropdown menu with JSON keys

My challenge involves working with an array containing objects, which are sent to the client via a node.js server integrated with mongodb. I need to extract all keys/fields from the object (such as name, surname, telephone) without their values (for exampl ...

Encountering the Selenium Webdriver HTTP error within an Angular 4 project

ERROR Detected Issue found in: ./node_modules/selenium-webdriver/http/index.js Module not found: Error: Unable to locate 'http' in 'C:\Users\aprajita.singh\Documents\Angular 4\Auto-Trender-Project\node_modules ...

The static folder in Express server is failing to serve files

I have an application with certain static files that I want to send to the client, however the server is not sending them. app.use(express.static(__dirname, '/public')); I need help fixing this particular code snippet. ...

Removing the navigation button from the hamburger menu

I am working on creating a semi-progressive top navigation bar. For the mobile viewport, the navigation bar will only display the logo and a hamburger button. When the button is clicked, various navigation menu options as well as the Log In and Sign Up bu ...

Property missing in Typescript type definition

In my Typescript Next project, I am using this component: import PageTitle from './pagetitle' import style from './contact.styl' export default function Contact() { return ( <section> <a name="contact"> ...

Combining specific columns in the user interface grid

I need to customize a UI grid by merging some middle columns to achieve the following layout: Name | Address | Comment | Job | College | Married ---------------------------------------------------------- Keshvi | India | New | Not applicable ...

Using the jquery slider in conjunction with the onchange event

I have integrated a jquery slider add-on into my project that updates a value in a Linux file whenever it is manipulated. The slider is connected to a text input box, which is set as readonly and therefore always blurred. The issue I am facing is that the ...

Retrieve data from two databases and display the information from two separate arrays on a single ejs page after making two separate database calls

Currently, I am faced with a challenge where I need to render a page by passing two arrays that are populated by two separate database calls. It seems that when I only pass one array to the ejs page, everything works as expected. For a single array, my a ...

Aurelia - Struggling to integrate CssAnimator with a basic message div

Currently, I am utilizing Typescript and referencing an informative blog post by Mikhail Shilkov. Even though I am implementing Typescript, the blog post revolves around Javascript. This has led me to ponder whether this difference is the root cause of th ...

Struggling to successfully map angular model data to a Spring POJO class

I am currently having issues mapping an Angular model class to my Spring model class. When I try to do so, all the entities in the Spring model class show up as null. I have included the code snippets below that I used for mapping, but unfortunately, it fa ...

Issue with sending files to web API using Angular FormData

After stepping through the code, I noticed that my formData is empty when it reaches the API side, with the parameter pFileToUpload having a value of null. Step 1: HTML <div class="form-group"> <input type="file" id="f ...

extracting the value of a chosen radio button in AngularJS using HTML

When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...

The Angular APP_INITIALIZER provider is encountering an issue where one injected service is being passed as undefined, while the rest are

One of my injected services is returning as undefined in my provider, despite both services running before the provider. Any help or insight would be greatly appreciated. Below is a snippet of my code from AppModule: @NgModule({ declarations: [ // ...

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

javascript pull data from an array

As a novice in HTML and JavaScript, I have a brief code snippet that embeds multiple audio files. I am utilizing a loop and would like to utilize strings from an ARRAY as the sources for the WAV files (rather than just "file1.wav"). Thank you. <!DOCT ...

React router updates the URL without affecting the actual display

I am facing an issue in my React project where the URL changes when clicking a link, but the view does not update. I have a separate route and links file, and I can't seem to figure out the problem. Here is my index.js: import React from 'react ...

Error encountered in Angular 9: nativeElement.selectpicker is not a function while using bootstrap select

I am currently working on implementing a searchable select box with Bootstrap in my Angular 9 project. To achieve this, I have decided to use Bootstrap Select. Below is the code snippet showcasing how I have integrated it into my project: Within my templ ...