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

Setting up an auto-complete dropdown with PrimeNG and Angular

Struggling with the auto-complete feature, where the dropdown loads initially but fails to filter values as I type. Here's a snippet from service.ts: getUserLocations(UserID: string, allList:string ) { return this._http.get(environment.BASE ...

Typescript void negation: requiring functions to not return void

How can I ensure a function always returns a value in TypeScript? Due to the fact that void is a subtype of any, I haven't been able to find any generics that successfully exclude void from any. My current workaround looks like this: type NotVoid ...

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Here is the code snippet that I have written: I am aware that using the 'await' keyword inside a for-loop is not recommended. const booksNotBackedUp: number[] = []; for (let i = 0; i < usersBooks.length; i += 1) { const files = await ...

ngIf is not refreshing my template

Within my Angular2 application, I have a Component that takes an array as input and utilizes a service to retrieve the Latitude and Longitude for each entry in the array. This involves making multiple asynchronous calls to the service using Promises. expo ...

What is the process of creating a typeorm relationship between orders and products?

My Orders Entity file in TypeOrm looks like this: @Entity('orders') export class OrdersEntity { @PrimaryGeneratedColumn('uuid') id: string; @CreateDateColumn() created: Date; @UpdateDateColumn() updated: Date; @Column('t ...

The Angular ng serve command seems to be malfunctioning

Whenever I try to run ng serve, I keep getting this error: module.js:540 throw err; ^ Error: Cannot find module '@angular-devkit/core' at Function.Module._resolveFilename (module.js:538:15) at Function.Module._load (module.js:46 ...

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

Currently working on a ReactJS Typescript project using NPM and VSCode. Despite all my Cypress tests running smoothly, I am encountering a syntax error in VSCode: Error: Cannot find name 'cy' Any ideas on how to resolve this issue? Attempted th ...

The provided Material-UI Fade component contains multiple children, which is not supported by 'ReactElement<any, any> | undefined'

I'm struggling to implement a Material UI <Fade> component in my code. Unfortunately, I keep encountering the following error message and as someone who is still learning TypeScript, I am unsure of how to resolve it. Error: Expected ReactElement ...

Tips for incorporating child components when creating unit tests in Angular 2

While working on my component, I encountered an issue with the child component during unit testing. An error message is appearing stating that the child component is not defined. Any advice or solutions would be greatly appreciated. Thank you in advance. ...

Determine whether a many-to-many relationship involves a specific entity

I am currently working on developing an API for managing surveys. One challenge I'm facing is determining whether a specific user has moderation privileges for a particular survey. A many-to-many relationship has been set up between the two entities. ...

Tips for converting a string array constant into a union type

I have a string array that I want to use to create a new type where the properties correspond to the elements in the array. There are different types of arrays and I have a function that generates different output types based on the input array. const RG ...

Ways to Execute the Constructor or ngOnInit Multiple Times

Here's the scenario I'm facing: I have developed an app with multiple screens. One of these screens displays a list of articles. When a user clicks on an article, they are directed to another screen that shows the details of that specific item. ...

Exploring the concept of union return types in TypeScript

Hello, I am facing an issue while trying to incorporate TypeScript in a way that may not be its intended use. I have created a custom hook called useGet in React which can return one of the following types: type Response<T> = [T, false, false] | [nul ...

Typescript: Why Lines Are Not Rendering on Canvas When Using a For-Loop

What started out as a fun project to create a graphing utility quickly turned into a serious endeavor... My goal was simple - to create a line graph. Despite my efforts, attempting to use a for-loop in my TypeScript project resulted in no output. In the ...

Developing various VueJS TypeScript projects utilizing a shared library

In the process of developing two VueJS applications using TypeScript, I have created one for public use and another as an admin tool exclusively for my own use. Both applications are being built and tested using vue-cli with a simple npm run serve command. ...

"Error message: The term 'subscribe' is not recognized in Angular

Recently, I started learning Angular and have been following Angular6 tutorials on YouTube here. I encountered an error while working on the project. My goal is to display a list of employees below the existing lists, and I am currently troubleshooting t ...

Oops! It seems like there has been an issue. The EnjoyHint is not

Encountered the following error message: https://i.stack.imgur.com/JL4l6.png The error in my code is within the line that initializes a new EnjoyHint object. Seeking assistance to resolve this issue. public initiate(stepName) { const steps = ...

Setting up a variable with a changing value

In a very specific scenario, the body of type varies based on the length_type attribute (as illustrated in the example). enum LengthTypeEnum { SELECT = 'SELECT', STATIC = 'STATIC', CONDITION = 'CONDITION', PERIOD = ...

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for usi ...

The issue with hiding the Angular PrimeNG megamenu despite setting the visibility to false

Need help with Angular PrimeNG megamenu visibility issue. <p-megaMenu [model]="menuItems"></p-megaMenu> this.menuItems = [ { label: 'Home', items: null, routerLink: [''] }, ...