AngularJS: Get query string values without a hash in the link

Question

I am trying to get query string values using angularjs.

my Url: http://localhost/example.php?sportsId=3

when I applied var goto = $location.search()['sportsId']; it returns me undefined.

However, if I add hash in url like Url: http://localhost/example.php#?sportsId=3

then it returns me correct value 3.

But in this case, it also gives me Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=sportsID%3D&p4=sportsID%3D

Also, my default $_REQUEST['sportsId'] is not working with hash format.

How can I correctly get values from query string by using angularjs?

I think following question can help you in your issue. [stackoverflow.com/questions/11063673/… [1]: stackoverflow.com/questions/11063673/… — Amit Sirohiya
– Amit Sirohiya, Commented Apr 9, 2015 at 9:31

prototype · Accepted Answer · 2015-04-09 10:02:18Z

27

I know this is not Angular but its pure JS and works like a charm (just don't add dummyPath and it will take the URL).

function getUrlParameter(param, dummyPath) {
        var sPageURL = dummyPath || window.location.search.substring(1),
            sURLVariables = sPageURL.split(/[&||?]/),
            res;

        for (var i = 0; i < sURLVariables.length; i += 1) {
            var paramName = sURLVariables[i],
                sParameterName = (paramName || '').split('=');

            if (sParameterName[0] === param) {
                res = sParameterName[1];
            }
        }

        return res;
}

Usage:

var sportdsId = getUrlParameter('sportsId');

edited Apr 9, 2015 at 10:02

answered Apr 9, 2015 at 9:31

prototype

3,3232 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dprothero Over a year ago

Nice. Just need to decode the string: res = decodeURIComponent(sParameterName[1].replace(/\+/g, " "));

Dash · Accepted Answer · 2017-04-24 09:45:29Z

4

Three simple steps did the Job:

Config angular for HTML5 mode by adding the following code to your controller/service:

app.config(['$locationProvider', function ($locationProvider) { $locationProvider.html5Mode(true); }]);
Add base element to your HTML:

<base href="/">

Inject "$location" into your angular controller:

app.controller('ABCController', ['$scope', '$location', ABCController]);

Finally to get the query string use the following code:

var yourId = $location.search().yourId;

The answer is already there in previous answers, I just summarized for better understanding. Hopefully somebody will become beneficial from it.

answered Apr 24, 2017 at 9:45

Dash

8442 gold badges9 silver badges17 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:18Z

2

Please refer below links

var goto = $location.search().sportsId;

Getting values from query string in an url using AngularJS $location

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Apr 9, 2015 at 9:37

Arepalli Praveenkumar

1,3161 gold badge13 silver badges29 bronze badges

2 Comments

Farjad Hasan Over a year ago

var goto = $location.search().sportsId; doesn't work. returns me undefined

James Over a year ago

This answer requires you to adjust your $locationProvider as well which may not work in all instances.

gamliela · Accepted Answer · 2017-06-29 10:14:23Z

2

This is what I use. It's essentially the same as the accepted answer but returns all parameters as an object and handle decoding of url components.

function getUrlParameters() {
    var pairs = window.location.search.substring(1).split(/[&?]/);
    var res = {}, i, pair;
    for (i = 0; i < pairs.length; i++) {
        pair = pairs[i].split('=');
        if (pair[1])
            res[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
    return res;
}

answered Jun 29, 2017 at 10:14

gamliela

4,2092 gold badges41 silver badges47 bronze badges

Comments

Chris Noring · Accepted Answer · 2015-04-09 09:40:11Z

1

You need to use

$location.search()

This returns an object with your params so lets say you have url?param1=val&param2=val2

This will give the following back

{ param1 : val, param2 : val2 }

Also make sure you enable

$locationProvider.html5Mode(true);

answered Apr 9, 2015 at 9:40

Chris Noring

4713 silver badges9 bronze badges

Comments

CraftyFella · Accepted Answer · 2016-01-26 14:14:53Z

Create your self a search object from the the $window.location.search property using the following:

    var search = $window.location.search
            .split(/[&||?]/)
            .filter(function (x) { return x.indexOf("=") > -1; })
            .map(function (x) { return x.split(/=/); })
            .map(function (x) {
                x[1] = x[1].replace(/\+/g, " ");
                return x;
            })
            .reduce(function (acc, current) {
                acc[current[0]] = current[1];
                return acc;
            }, {});

    var sportsId = search.sportsId;

or create a queryString factory which you can use anywhere.. This combines the left and right parts of the queryString.. I.e. before # and after the #

(function () {
    "use strict";

    angular
        .module("myModuleName")
        .factory("queryString", QueryStringFactory);

    function QueryStringFactory($window, $location) {

        function search() {

            var left = $window.location.search
                .split(/[&||?]/)
                .filter(function (x) { return x.indexOf("=") > -1; })
                .map(function (x) { return x.split(/=/); })
                .map(function (x) {
                    x[1] = x[1].replace(/\+/g, " ");
                    return x;
                })
                .reduce(function (acc, current) {
                    acc[current[0]] = current[1];
                    return acc;
                }, {});

            var right = $location.search() || {};

            var leftAndRight = Object.keys(right)
                .reduce(function(acc, current) {
                    acc[current] = right[current];
                    return acc;
                }, left);

            return leftAndRight;
        }

        return {
            search: search
        };

    }

}());

usage:

var qs = queryString.search();
var sportsId = sq.sportsId;

Collectives™ on Stack Overflow

AngularJS: Get query string values without a hash in the link

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related