Invoking numerous functions through the (click)= event

When it comes to removing a user from my site, I find myself having to execute multiple database queries to delete the user's ID across approximately 10 different tables.

Currently, I am resorting to what I consider a messy workaround where I have multiple (click) events on the same button triggering various functions. These functions then go through my service layer to interact with the database. In my service, I have separate functions for each table that needs to be accessed in order to delete the user's ID.

Here is an example of the code structure:

<button (click)="deleteCandidateInCompanies(Item.owner)"(click)="deleteCandidateInOrganizations(Item.owner)"

In the component.ts file:

 deleteCandidateInCompanies(owner: string): void {
    // Function logic for deleting candidate from companies
}

deleteCandidateInOrganizations(owner: string): void {
    // Function logic for deleting candidate from organizations
}

In the service.ts file:

// Functions to handle deletion logic for companies and organizations

When attempting to combine these functions into one in the component.ts file, an error occurs stating "Promise returned from deleteCandidateFromCompanies is ignored." This prompts me to search for a more efficient way to consolidate these functions and reduce both the amount of code and number of database calls made.

Answer №1

If you're looking for a solution, consider creating a single function that encompasses both tasks and utilizing async/await to manage the asynchronous nature of the call. Here is an example:

async function myFunctionWrapper(owner) {
  await deleteCandidateInCompanies(owner);
  await deleteCandidateInOrganizations(owner);
}

Then, simply invoke the wrapper in your HTML like so:

<button (click)="myFunctionWrapper(Item.owner)" />

Answer №2

One way to tackle this issue is by utilizing the template form and chaining function calls within the template, as shown below:

<button (click)="deleteCandidateInCompanies(item.owner); deleteCandidateInOrganizations(item.owner);">Click here</button>

Alternatively, some prefer using &&, but the outcome may vary:

<button (click)="deleteCandidateInCompanies(item.owner) && deleteCandidateInOrganizations(item.owner);">Click here</button>

In this scenario, deleteCandidateInOrganizations will only be executed if deleteCandidateInCompanies is successful.

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

Tips for showcasing the outcome of an SQL query on an HTML page

I need assistance with displaying the output of an SQL query on my website. My server-side is using NodeJs and client-side is VueJs. After querying my database, I received the following result: [ { Time_Stamp: 2019-12-09T11:54:00.000Z, Time_Sta ...

Passing Imported Module to Feature Module in Angular 7

In my Angular 7 app, I have set up a hierarchy of feature modules. The structure looks like this: app admin (UI module imported here) feature1 feature2 public Within the admin module, I have included a UI framework module. My question is, if modules ...

updating a div with URL redirection instead of global redirect

I am facing an issue with redirecting my website flow to the login page when a user clicks any link on the page after the session has expired (either due to timeout or manual logout from another window). In an attempt to solve this, I inserted the followi ...

Searching for a single cell within an HTML table

I've been on the hunt for a code that can search through a table and show just one cell. I tried creating my own, but finally stumbled upon one that seems to work perfectly, except for one hiccup. When the search bar is cleared, it displays the first ...

Numerous JQuery AJAX form submissions leading to individual outcomes

I have implemented a script on my page that handles form submissions for multiple forms by calling a specific action. Here is the script: $(function () { $('form').submit(function () { if ($(this).valid()) { $.ajax({ ...

Encountering the error message "Unable to locate module '.nextserverpages-manifest.json'" while attempting to include `babel.config.js` in a Next.js application

During the process of setting up testing for my current next app, we incorporated some new dependencies including jest, babel-jest, @babel/preset-env, @babel/preset-react, and react-test-renderer. We also created a babel.config.js file to configure Babel s ...

When running npm install in an Angular project, a Node error occurs due to cb() not being called within npm ERR!

I encountered an issue when I cloned a Git Angular 11 project and ran npm install. The error message displayed was as follows: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dda9aeb1b4b3a99debf3ecf3ee">[e ...

How to avoid an additional carriage return in Internet Explorer when editing a Textarea?

In Internet Explorer, we are facing an issue with a multiline textarea. After setting the content using JavaScript and checking it, everything appears correct without any additional carriage returns in the textarea: document.getElementById( 'text-ar ...

What is the best way to transfer data in a JavaScript onclick event and then retrieve it in the click handler function?

I've been struggling with this issue for some time now. When researching the onclick JavaScript call, I noticed that sometimes it is written as onClick with a capital C, while other times it's simply onclick. The code I'm working on is part ...

Difficulty in obtaining the child index upon clicking

I am currently working on retrieving the index of a child element within a parent element. While following a solution here, I encountered an issue with an infinite loop. This is the code I have written so far: var div = document.getElementById("spans ...

Retrieve a mapping of keys from a generic object structure in TypeScript

I am trying to extract the key map from an object, and although I have created a function for this purpose, TypeScript is not happy with it. How can I resolve this issue without using acc: any? const origin = { a: 1, b: 'string', c: () =&g ...

Leveraging jsonp with nodejs and original ajax

I wanted to understand how jsonp works, so I decided to create a demo using nodejs without jQuery. However, I encountered some issues with my code. Here is what I tried: views/index.jade doctype html html head title Demo of jsonp body #res ...

A guide on how to effectively simulate a commonJS module that has been imported in

How can I successfully mock a commonJS style module in Jest that I am importing for an external connection? The module is called 'ganblib.js' and it's causing some trouble when trying to mock it with Jest. Any advice or suggestions would be ...

Having difficulty displaying Laravel API data with Relationship in Vue Js

Working on a project that involves Laravel 10 API and Vue.js 3 frontend In my EmployeeController.php file, I have three models: Employee, Title, and Salary. The Employee model has a many-to-many relationship with the Salary and Title models, while the Sal ...

Having trouble invoking an express route on mobile devices using the .click method

I'm experiencing a strange issue where my code works perfectly in Chrome browser but fails to function on my phone. Here's the snippet of code causing the problem: $('#plusSign').on('click', function() { var myLin ...

The Gatsby node encounters an error while trying to create a new page

I am currently working on creating sub-pages for a projects category in Gatsby. The parent page for each project is generating correctly, but the sub-pages are not behaving as expected. Each project has the potential to have zero or multiple sub-pages, an ...

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

I am encountering an error while trying to run the command ./bitgo-express --port 3080 --env test --bind localhost: (node:367854) ExperimentalWarning: The ESM module loader is experimental. internal/process/esm_loader.js:90 internalBinding('errors ...

Tips on enclosing <li> elements within <ul> tags

Whenever I trigger the button within the .items class, it generates <li> elements in the following manner: <ul class="items"> <ul class="items"> <li>img1</li> ...

Retrieving JSON information from a PHP script with AJAX

I am currently experiencing an issue with my PHP script, 'getNews.php'. Despite working correctly in the terminal and returning the expected data, I am encountering difficulties when trying to retrieve this information through JavaScript. <?p ...

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...