Learn the process of extracting query parameters from a URL with the format `example.com/path#p1=v1&p2=v2...` using Angular

Callback URLs from singly.com are coming in the format of

example.com/path#p1=v1&p2=v2...

Is there a more Angular-friendly way to extract query parameters since $location.search and $routeParams do not work without the presence of the ? in the URL?

Update: I managed to accomplish my goal by manually parsing the URL using absUrl(), but I am curious if there is a more Angular-esque method to achieve the same result.

Answer №1

Derived from and influenced by:

var getQueryParameters = function (queryString) {
    queryString = (queryString || location.hash).slice(1).split("&");
    var params = {};
    for (var index = 0; index < queryString.length; ++index) {
        var pair = queryString[index].split("=");
        if (pair.length !== 2) continue;
        params[pair[0]] = decodeURIComponent(pair[1].replace(/\+/g, " "));
    }
    return params;
};

console.log( getQueryParameters() );

http://fiddle.jshell.net/xTSaV/

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

Updating the Backend Automatically in Express.js When the Database Changes

I decided to create a chat platform from scratch to dive into the world of requests and server-side logic. My strategy involved setting up an express.js server that listens for POST requests to '/messageReceiver'. app.post("/messageReceiver", (r ...

Incorporate href along with ng-click for improved functionality

I need a link that will call a $scope-function when clicked, which will then display another view. I also want the user to be able to right-click on the link and open it in a new window or bookmark it. Unfortunately, the current html code is not worki ...

Filtering database records using a static dropdown list in MVC 5: A step-by-step guide

Is there a way to filter database records based on the columns QtyRecieved, QtyRecievedand Void using a static HTML dropdown list? The QtyRecieved and QtyRecievedand column are both decimal values, while Void is a boolean. This is what I have attempted: ...

Laravel does not have the capability to provide a genuine json response

I am facing an issue with my Laravel controller. The code is straightforward: class MyController extends Controller { public function list() { return response()->json(['a' => 'hello']); } } When I access the ...

Mastering the ins and outs of ngStorage in AngularJS

Imagine a web page featuring a form that allows users to input multiple entries before submitting. As each entry is added, a summary of the data entered is displayed in a table at the top. Once all entries are completed, the user can then proceed to submit ...

Combining react-draggable and material-ui animations through react-transition group: a comprehensive guide

Trying to incorporate react-draggable with material-UI animations. One approach is as follows: <Draggable> <Grow in={checked}> <Card className={clsx(classes.abs, classes.paper)}> <svg classN ...

Can hash routes be defined in next.js?

Previously, I created a modal component using <HashRouter> in react-router where the modal would become active or inactive based on the hash url. For example, the modal is inactive when the url is /route, but becomes active when the url is /route#m ...

What is the best way to synchronize HTML5 audio playback on different browsers?

When working with audio files in different browsers like Chrome, Firefox, and Safari, I noticed that they seem to start at slightly different timestamps. This discrepancy becomes more pronounced as the audio progresses, with a gap of around 5 seconds after ...

Concurrent Icons on Angular-Chart's Piechart

I recently incorporated angular-charts into my project to make the display of charts easier. Initially, setting up and rendering a pie chart was a breeze following the guidelines I found here. Here's a snippet of the code I used: <canvas id="pie" ...

The use of Physijs and implementing setLinearVelocity for object movement

2-09-2015 - UPDATE: The code provided below is now functional with the use of setLinearVelocity(). If you were facing similar issues, this updated code may help you. Find the original question with the corrected code below... A player object has been deve ...

How to dynamically adjust the height of a content div in CSS while maintaining fixed headers and foot

Seeking assistance with CSS layout from this amazing community. Desired layout includes a header, footer, left pane, and content area. Current CSS code provided but looking for better solutions. Image of desired layout included along with existing CSS a ...

Tips for sending formData (file upload) via jQuery ajax with MVC model

My Web Development Challenge : //IMAGE UPLOAD var formData = new FormData(); var totalImages = document.getElementById("ImageUpload").files.length; for (var x = 0; x < totalImages; x++) { ...

I am seeking assistance with my code. It is passing most of the test cases, but is failing only two without any error messages. What could

I recently started teaching myself programming, so please excuse me if my question seems a bit basic. One of the challenges on CodeCamp requires defining a function that takes an array with 2 values as input and returns the Least Common Multiple (LCM) of ...

Encountering issues while attempting to modify the route from a particular Component

I have encountered an issue with changing routes in React from a specific component to another. Switching between '/' and '/login' works fine, but when the active route is '/menu-management', clicking on the Link causes an err ...

PHP jQuery buttons for popovers

With a simple click of a button, I can generate 8 presentations and then edit each one individually by clicking on its respective name. Within this editing process, there is another form where I would like to include additional buttons that allow me to cus ...

useEffect does not trigger a rerender on the primary parent component

I am facing an issue where the main parent component does not re-render when I change the state 'click button' in another component while using useEffect. Oddly enough, the main <App /> component only re-renders properly when I reload the p ...

Identify and handle multiple scenarios in JavaScript without using if statements

I have developed a function that is supposed to evaluate all scenarios and provide an immediate result if one of the cases does not match. const addText = (data, addAlternative) => { return (data !== 'N/T' || data === 0 || data) ? d ...

Enhance User Experience with jQuery DataTables Plugin: Implementing Search Text Highlighting Feature

Lately, I've been exploring the fantastic DataTables plugin (v1.6.2) for jQuery (v1.4.2). I'm wondering if you're aware of any customizations or addons that would enable me to emphasize the text entered in the search box on the filtered rows ...

Implementing form validations using JavaScript for a form that is created dynamically

I have dynamically created a form using javascript and now I need to add mandatory validations on the form. The validations should trigger when the dynamically created button is clicked. However, I am facing an issue where I receive an error whenever I t ...

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...