Angularjs - How can I get parameters from URL

Question

I have a URL like that: http://myproject.com/apartments?location=123&arrival=01&departure=456&rooms=789

How can I get the value of location, arrival, departure, rooms and pass it to my service.

I try to using $location.search() but I can not get the values. The result: Object { location=undefined, arrival=undefined, departure=undefined, more...}

My serivce:

angular.module('apartmentService', [])

    .factory('Apartment', function ($http) {
        return {
            get: function (parameters) {

                console.log(parameters);

                return $http({
                    method: 'GET',
                    url: '/api/apartments',
                    params: {location: parameters}
                });
            }
        };
    });

My controller:

angular.module('apartmentCtrl', [])

    .controller('ApartmentController', function ($scope, $http, $location, Apartment) {
        $scope.loading = true;

        $scope.parameters = {
            location: $location.search().location,
            arrival: $location.search().arrival,
            departure: $location.search().departure,
            rooms: $location.search().rooms
        };

        Apartment.get($scope.parameters).success(function (data) {
            $scope.apartments = data;
            $scope.loading = false;
        });
    });

your URL is a string. So, using string.split(), string.indexOf() should be enough, no? — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Feb 25, 2015 at 14:55
There are plenty of samples on the net : developer.mozilla.org/fr/docs/Web/JavaScript/Reference/… — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Feb 25, 2015 at 14:59

simon · Accepted Answer · 2015-02-25 15:50:04Z

3

Ugly unsecure two-liner:

paramsObject = {};
window.location.search.replace(/\?/,'').split('&').map(function(o){ paramsObject[o.split('=')[0]]= o.split('=')[1]});

paramsObject will be:

Object {location: "123", arrival: "01", departure: "456", rooms: "789"}

which you can inject directly into your $scope.parameters

plunker here

answered Feb 25, 2015 at 15:50

simon

5264 silver badges8 bronze badges

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

Comments

Mark Pieszak - Trilon.io · Accepted Answer · 2015-02-25 15:04:57Z

1

You're mapping them incorrectly, to retrieve the queryStrings you do:

$location.search('arrival')
$location.search('location') 
// etc etc

But you don't really need to map them... $location.search() returns an object (key/value) of all the parameters

$scope.parameters = $location.search();

// would return an object { location : '123', arrival : '555' /* etc etc */ }

answered Feb 25, 2015 at 15:04

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

4 Comments

Joshua Hansen Over a year ago

Thank you. But when I edit to: $scope.parameters = $location.search();. The empty object is returned.

Mark Pieszak - Trilon.io Over a year ago

Do you definitely have things at the end of your URL? whatever.html?location=123&arrival=555 It only returns empty object when there is nothing in the querystring

Joshua Hansen Over a year ago

If my url like: http://sleepy.dev:8000/apartments?location=123&arrival=01&departure=456&rooms=789. It return empty object. But when I add the # to my url: http://sleepy.dev:8000/apartments#?location=123&arrival=01&departure=456&rooms=789. It will be OK. But when I submit the form through GET method, the # is not exits.

Mark Pieszak - Trilon.io Over a year ago

I'm not sure what you mean, but the # and ? are both required in order for it to see the params!

devwannabe · Accepted Answer · 2015-02-25 15:24:34Z

1

Use ui-router. You will love it and it's the proper approach! Trust me!

There is a great example from this link - https://github.com/angular-ui/ui-router/wiki/URL-Routing

answered Feb 25, 2015 at 15:24

devwannabe

3,2189 gold badges45 silver badges83 bronze badges

Comments

HDK · Accepted Answer · 2015-02-25 15:08:15Z

0

$location.search('queryparamname');

inside the controller inject the service $location

see the reference

https://docs.angularjs.org/api/ng/service/$location

// given url http://example.com/#/some/path?foo=bar&baz=xoxo
var searchObject = $location.search();
// => {foo: 'bar', baz: 'xoxo'}

// set foo to 'yipee'
$location.search('foo', 'yipee');
// $location.search() => {foo: 'yipee', baz: 'xoxo'}

edited Feb 25, 2015 at 15:08

answered Feb 25, 2015 at 14:58

HDK

8141 gold badge8 silver badges13 bronze badges

3 Comments

HDK Over a year ago

use like key value see the documentation

HDK Over a year ago

// given url example.com/#/some/path?foo=bar&baz=xoxo var searchObject = $location.search(); // => {foo: 'bar', baz: 'xoxo'} // set foo to 'yipee' $location.search('foo', 'yipee'); // $location.search() => {foo: 'yipee', baz: 'xoxo'}

Joshua Hansen Over a year ago

It return the empty object :(

Muhammad Reda · Accepted Answer · 2015-02-25 15:39:50Z

0

I am guessing it is because of angular is expecting the data after the url hash.

Meaning that $location.search should work if the url look like that: http://myproject.com/#apartments?location=123&arrival=01&departure=456&rooms=789.

One thing you can try, is to let the app know its base. Add the following line to your html head tag.

<base href="/">

answered Feb 25, 2015 at 15:39

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

1 Comment

Mark Pieszak - Trilon.io Over a year ago

Joshua, the # and ? are both required for it to work

Collectives™ on Stack Overflow

Angularjs - How can I get parameters from URL

5 Answers 5

Comments

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related