Sharing information with a service in Ionic and Angular

I need to send data to my service and incorporate it into a URL string. The code snippet below shows how I am obtaining the data in my constructor when the user navigates to the page:

  constructor(public alertController: AlertController,
              private route: ActivatedRoute,private ticket_details: TicketDetailsService) {
                this.route.queryParams.subscribe((data)={
                  this.id=JSON.stringify(data);
                  alert(this.id);
                });
        }

Next, I am invoking a service using the following code:

 tcketDetails(){
       this.ticekt_details.get_ticket_details().then(ticketData ={
        console.log(ticketData.data);
        this.ticketData=ticketData.data;
      });

  }

Service Code:

private server_path = 'https://example.com/apis/tickets/ticekt_details/id';

 constructor(private http: HTTP) {  }
 async get_ticket_details() {
    return  this.http.get(this.server_path, {}, {})
      .then(data={
        return JSON.parse(data.data);
      })
      .catch(error={
        console.log(error.status);

      });

  }

After receiving the id as shown in the alert message, I am unsure of how to pass the id parameter to the server_path variable in my service. Any guidance would be appreciated.

Answer №1

After initializing the component's constructor with this.id=JSON.stringify(data);, make sure to update the service URL by calling the following function. You will need to add this function to the service as well.

Inside the constructor(), include the following code to update the URL:

this.id=JSON.stringify(data);
this.ticket_details.updateUrl(id);

Next, within the ticket_details module, define a function that updates the URL before executing the get_ticket_details() function.

The structure of the updateUrl() function should be as follows:

updateUrl(id){
    this.server_path = `this.server_path/ + ${id}`;
}

Furthermore, ensure that the server_path in your service is specified correctly at the top:

private server_path = 'https://example.com/apis/tickets/ticekt_details';

You are now ready to proceed with invoking the get_ticket_details() method.

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

Ways to incorporate fresh features through button clicks

Within a table cell, I am using ngClass with a condition like this: <tr> <td [ngClass]="{active: !show, inactive: show}"></td> <td></td> </tr> This ngClass is toggled on button click by the following function: ...

Differences between HTTP requests made from a Node server and an Angular application

A group of aspiring developers is currently working on a cutting-edge web application using Angular 7 with the EAN (Angular Node Express) stack. Our project involves interacting with around 20-25 REST endpoints to retrieve data, perform necessary manipulat ...

Dynamic Styling Based on Selected Menu Option in Angular 7

As I delve into learning Angular, I am exploring the creation of a dynamic navbar menu where the 'active' class is determined by the current page. While browsing, I came across this solution on Stack Overflow: Active Class Based On Selected Menu. ...

Trouble encountered while using useRef in TypeScript

I'm encountering an issue with the code below; App.tsx export default function App() { const [canvasRef, canvasWidth, canvasHeight] = useCanvas(); return ( <div> <canvas ref={canvasRef} /> </div> ) ...

Encapsulate the HTTP request within a common function for reus

My rest-provider service handles all of my http calls, but I've noticed that each function is repeating a lot of the same http code. It seems like I should create a shared function to avoid this repetition and make it easier to update in the future. ...

Receiving information within an Angular Component (Profile page)

I am currently developing a MEAN Stack application and have successfully implemented authentication and authorization using jWt. Everything is working smoothly, but I am encountering an issue with retrieving user data in the Profile page component. Here ar ...

Why is the quantity of my item being increased? My method is adding it when it shouldn't be

I have a project in Angular that involves an online store. However, every time I click the button "agregar a carrito" (add to cart in Spanish), my item's quantity seems to increase inexplicably. ts. removeItem(item: iProduct) { if (item.quantity ...

Issue with angular2-powerbi Configuration: Please ensure you specify a type in the configuration, either as an attribute like 'powerbi-type="report"' or within the configuration settings

While attempting to utilize the PowerBI-Angular2 to showcase the embedded Power BI, I encountered the following error: errors.ts:42 ERROR Error: Attempted to embed using configuration {"accessToken":"xxxxx","tokenType":0,"embedUrl":"https://embedded.power ...

Displaying ngFor results through filtering with pipes in Angular 2

I have a situation where I am working with multiple nested *ngFor loops and using pipes to manipulate the data. My goal is to extract all the inner items from these nested loops in order to perform an action on each of them. Here is an example code snippe ...

Unable to log out of OIDC-client due to an error: end session endpoint not found

Currently, I am in the process of setting up a code flow with Auth0 as my chosen identity provider. Successfully, the sign-in process functions well and I receive a valid token from Auth0. However, I am encountering an issue when attempting to sign out ...

IonTabButton not responding to onClick events

Currently, I am utilizing the Ionic 5 CSS library in combination with React. I found that IonTabButtons have a more appealing style compared to IonButtons because IonTabButton allows for text below the Icon. In the screenshot provided, all icons are displ ...

Encountering the error below while attempting to run ng serve

Having an issue with VSCode as a new user. When running ng serve, I encountered the following error message: PS C:\Windows\System32\x-app> ng serve --configuration=it An unhandled exception occurred: Workspace config file cannot le loa ...

What is causing TypeScript to incorrectly infer rest parameters in function implementation?

I have created a function that takes a string name and a varying number of parameters which should be inferred from a specific interface. While calling this function results in correct inference, the type is not narrowed down within the function itself. in ...

Struggling to configure Connected React Router correctly

As I work on updating my React, Redux, and Router versions to incorporate connected-react-router, I've encountered an issue with the root reducer and store creation process. The previous functioning reducer code looked like this: const appReducer = ...

The try-catch statement in Typescript is generating an inconsistent return error

I've encountered an issue with a TypeScript function that is flagging inconsistent return error. The function includes a try block that returns a value and a catch block that throws an error, resulting in the inconsistency. I am struggling to find a w ...

Resolving the global provider in Angular2 Typescript with the help of an Interface

In the realm of my Angular2 application, I have two essential services called WebStorageService and MobileStorageService, both of which impeccably implement an interface known as IStorageService. Interestingly, in my magnificent main.component, I elegantly ...

How can I set up multiple queues in NestJs Bull?

My goal is to set up multiple queues in NestJs, and according to the documentation: You can create multiple queues by providing multiple comma-separated configuration objects to the registerQueue() method. However, I am encountering an issue where VSco ...

Tips for utilizing parameters within SQL Server

Hello everyone! I am new to SQL Server in Azure functions using Typescript. I am currently facing an issue while trying to update a row in the database using declared variables, particularly with VARCHAR types. Strangely, it works fine in the database tool ...

I am looking to refund the sum

I need assistance with returning an amount from a specific function. I have created a function called getWalletTotalAmont() getWalletTotalAmont() { let amount = 0; this.http.post<any>(`${this.generalService.apiBaseUrl}api/wallet/getWalletTotal ...

Is it possible for a Docker container to automatically back up its content before launching?

Currently, I am facing a challenge with my Docker setup for an Angular project. The issue arises when the node packages are not already installed, causing it to fail when someone tries to start it after cloning. This is due to the fact that node packages a ...