Utilizing Angular for making API requests using double quotes

I am experiencing an issue with my service where the double quotation marks in my API URL are not displayed as they should be. Instead of displaying ".." around my values, it prints out like %22%27 when the API is called. How can I ensure that my double quotation marks appear correctly in the URL?

Code

return this.http
      .get(`${this.env.HELPDESK_LIST_FILTER}` + '[{ "value": ' + `'"${value}"'` + ', "field": ' + `'"${column}"'` + ', "sort": ' + `'"${sort}"'` + ', "op": ' + `'"${filter}"'` + ' }]', params)
      .pipe(map((data) => data));

My desired URL format is:

https://example.com/api/tickets?filters=[{"value":"una","field":"name","sort":"none","op":"like"}]

However, my current URL looks like this:

https://example.com/api/tickets?filters=[{%20%22value%22:%20%27%22una%22%27,%20%22field%22:%20%27%22name%22%27,%20%22sort%22:%20%27%22none%22%27,%20%22op%22:%20%27%22like%22%27%20}]

Any suggestions on how to fix this issue?

Answer №1

Give this a shot:

    try out this code snippet:
          .get(`${this.env.API_URL}/search?query=${value}`, params)
          .pipe(map((response) => response.json()));

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

Padding the body of a single-page Angular application to ensure proper spacing and

How do I add padding to the body of a template in an angular ng-app? Where is the best place to include CSS for a ng-app rendered template? please refer to this fiddle for an example https://jsfiddle.net/aghsqnpa/ div.ngview { padding: 25px 50px 75p ...

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

Connecting Jquery for dynamic table generation

I'm having trouble connecting JQuery to my file. I'm attempting to create a dynamic table to display and modify data from my database using ajax, php, and mysql. I've double-checked the code multiple times and haven't found any errors. ...

Embracing the beauty of incorporating nested quotations

I've been experimenting with jquery's append functions lately. I'm adding a substantial amount of html, specifically a button with an onclick event function. It might sound complicated, but due to some technical restrictions, this is my onl ...

Why are JS & jQuery's inArray() and indexOf() functions not functioning correctly when indexes are strings?

Here is an example of an array: var arr = []; arr['A string'] = '123'; arr['Another string'] = '456'; I am attempting to find the index of either '123' or '456'. Both methods below are returnin ...

transforming JSON into CSV structure

I am attempting to utilize a JSON file as input data. Below is an excerpt of sample data. [ { id: 1671349531, name: "A Wild Restaurant Expansion", blurb: "We are looking to expand from our current location to a new and better facility...", goal: 17000, pl ...

Ways to steer clear of using eval for converting strings to decimal values

I currently have the fraction "1/7" and I am looking to convert it into a decimal. While I know I can achieve this using eval("1/7"), I prefer not to use eval as it is considered harmful. Are there any alternative methods to accomplish this? ...

Will the rel attribute work in all web browsers and with all HTML tags?

Confirming that it is compatible for use with JQuery scripting. ...

What is the best way to convert a circular JSON object to a string

Is there a way to stringify a complex JSON object without encountering the "Converting circular structure to JSON" error? I also need its parser. I am facing issues every time I try to use JSON.stringify and encounter the "Converting circular structure to ...

Can Restify Node return an integer value?

https://i.stack.imgur.com/72ltz.png I recently encountered an issue while trying to validate my URL with Facebook for my bot. It appears to be related to a data type problem since I seem to be sending a string instead of an integer. Below is a snippet of ...

Modifying the appearance of a Three.js collada object with new textures and colors

After successfully implementing a three.js example from the official site with my collada objects (.dae) using ColladaLoader.js, I am now wondering how to change the color attribute of the loaded collada object and add a custom texture. So far, my attempts ...

What is the best way to retrieve matching values based on IDs from an imported table?

How can I retrieve values that match on ID with another imported table? My goal is to import bank details from another table using the ID and display it alongside the companyName that shares the same ID with the bank details. I've attempted several o ...

Guidelines on utilizing map varieties for creating a type definition for `Object.keys`

Exploring a stricter definition of the Object.keys function using mapped types in TypeScript. An Illustrative Example: To begin, consider an object defined using const: const myObj = { a: 'some value', b: 5 }; Typically, when utilizing Ob ...

Save log discrepancies to a document

Upon completing my website for graduation, there is still one important feature I want to add. I would like to implement a script that sends the name of the website where it is installed, as well as any error messages, to my website. For instance: The fol ...

Troubleshooting Issue with Internet Explorer failing to update Asp.Net MVC3 Partial View

I am experiencing an issue with a page that includes a div for a partial view loaded via an ajax request. $.ajax({ url: 'CompleteSessions', success: function (data) { var selector = $('#complete-session-sect ...

assigned to a variable and accessed in a different route

Why does the "res.username" variable return as undefined in the second route even though my user needs to login before accessing any route? router.post('/login', passport.authenticate('local'), function(req, res) { res.username = r ...

How to apply CSS classes to dynamically injected HTML in Angular 7

One of the challenges I'm currently facing is how to assign a CSS class based on a calculation in my component. Here's a snippet from my component class: @Component({ selector: 'app-render-json', template: `<div [innerHtml ...

The user score tracking database, cataloging personal scoring history

In my database, I have a table called User. Each user in this table has a field named score. I am looking to display how the score of each user has evolved over time. My dilemma is whether to store this score separately. Should I create a new database t ...

Creating a new window using JavaScript with custom settings

Is it possible to create a window that opens when double clicking an icon on the desktop? I want this window to have specific dimensions and no menu bar or scrollbar. This is what my current code looks like: document.onload(openWin()); function openWin( ...

Having trouble accessing the loadTokenizer function in Tensorflow JS

As a beginner with Tensorflow.js concepts, I recently attempted to tokenize a sentence using the Universal Sentence Encoder in Javascript. You can explore more about it on Github Reference $ npm install @tensorflow/tfjs @tensorflow-models/universal-sentenc ...