Getting values from query string in an url using AngularJS location

Question

Regarding  location search  the docs say      Return search part  as object  of current url when called without any parameter    In my url  my query string has a param   test user bLzgB  without a value  Also   location search    returns an object  How do I get the actual text

User · Answer

First make the URL format correct for getting the query string use #?q=string that works for me

http://localhost/codeschool/index.php#?foo=abcd

Inject $location service into the controller

app.controller('MyController', [ '$location', function($location) { 

    var searchObject = $location.search();

    // $location.search(); reutrn object 
    // searchObject = { foo = 'abcd' };

    alert( searchObject.foo );

} ]);

So the out put should be abcd

User · Answer

If you just need to look at the query string as text  you can use   window location search

User · Answer

If your  location search   is not working  then make sure you have the following   1  html5Mode true  is configured in app s module config  appModule config    locationProvider   function  locationProvider        locationProvider html5Mode true          2   lt base href     gt  is present in your HTML   lt head gt     lt base href     gt         lt  head gt    References     base href     html5Mode

User · Answer

In my NodeJS example  I have an url  localhost 8080 Lists list1 html x1 y  that I want to traverse and acquire values   In order to work with  location search   to get x1 y  I have done a few things   script source to angular-route js  Inject  ngRoute  into your app module s dependencies  Config your locationProvider  Add the base tag for  location  if you don t  your search   x1 would return nothing or undefined  Or if the base tag has the wrong info  your browser would not be able to find your files inside script src that your  html needs  Always open page s view source to test your file locations   invoke the location service  search      my list1 js has      var app   angular module  NGApp     ngRoute        dependencies   ngRoute     app config function   locationProvider      config your locationProvider           locationProvider html5Mode true  hashPrefix                   app controller  NGCtrl   function   scope  datasvc   location      inject your location service           var val   window location href toString   split      1           var val    location search   x1     alert val            scope xout   function                 datasvc out val              then function  data                   scope x1   val                 scope allMyStuffs   data all                                     scope xout              and my list1 html has   lt head gt       lt base href     gt       lt  head gt   lt body ng-controller  NGCtrl  gt   lt div gt A lt input ng-model  x1   gt  lt br  gt  lt textarea ng-model  allMyStuffs   gt  lt  div gt   lt script src     js jquery-2 1 4 min js  gt  lt  script gt   lt script src     js jquery-ui min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 9 angular min js  gt  lt  script gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 9 angular-route js  gt  lt  script gt   lt script src     js bootstrap min js  gt  lt  script gt   lt script src     js ui-bootstrap-tpls-0 14 3 min js  gt  lt  script gt   lt script src  list1 js  gt  lt  script gt   lt  body gt    Guide  https   code angularjs org 1 2 23 docs guide  location

User · Answer

Angular does not support this kind of query string    The query part of the URL is supposed to be a  amp -separated sequence of key-value pairs  thus perfectly interpretable as an object    There is no API at all to manage query strings that do not represent sets of key-value pairs

User · Answer

Very late answer    but for someone who is in need  this works Angular js works too    URLSearchParams Let s have a look at how we can use this new API to get values from the location      Assuming  quot  post 1234 amp action edit quot   var urlParams   new URLSearchParams window location search   console log urlParams has  post        true console log urlParams get  action         quot edit quot  console log urlParams getAll  action          quot edit quot   console log urlParams toString         quot  post 1234 amp action edit quot  console log urlParams append  active    1         quot    post 1234 amp action edit amp active 1 quot   FYI  IE is not supported use this function from instead of URLSearchParams urlParam   function  name        var results   new RegExp      amp      name         amp                               exec window location search        return  results     null    results 1     0   false     console log urlParam  action       edit

User · Answer

location search   returns an object  consisting of the keys as variables and the values as its value   So  if you write your query string like this     user test user bLzgB   You could easily get the text like so    location search   user   If you wish not to use a key  value like  foo bar  I suggest using a hash  test user bLzgB    and calling    location hash     would return  test user bLzgB  which is the data you wish to retrieve    Additional info   If you used the query string method and you are getting an empty object with  location search     it is probably because Angular is using the hashbang strategy instead of the html5 one     To get it working  add this config to your module   yourModule config    locationProvider   function  locationProvider        locationProvider html5Mode true

User · Answer

you can use this as well  function getParameterByName name        name   name replace                replace                     var regex   new RegExp       amp      name         amp                 results   regex exec location search       return results     null        decodeURIComponent results 1  replace     g            var queryValue   getParameterByName  test user bLzgB

User · Answer

Not sure if it has changed since the accepted answer was accepted  but it is possible    location search   will return an object of key-value pairs  the same pairs as the query string  A key that has no value is just stored in the object as true  In this case  the object would be     test user bLzgB   true    You could access this value directly with  location search   test user bLzgB  Example  with larger query string   http   fiddle jshell net TheSharpieOne yHv2p 4 show  test user bLzgB amp somethingElse amp also amp something Somethingelse  Note  Due to hashes  as it will go to http   fiddle jshell net   url  which would create a new fiddle   this fiddle will not work in browsers that do not support js history  will not work in IE  lt 10   Edit  As pointed out in the comments by  Naresh and  DavidTchepak  the  locationProvider also needs to be configured properly  https   code angularjs org 1 2 23 docs guide  location -location-service-configuration

User · Answer

My fix is more simple  create a factory  and implement as one variable  For example   x000D   x000D  angular module  myApp       x000D   x000D     This a searchCustom factory  Copy the factory and implement in the controller x000D   factory  searchCustom   function  http  log       x000D      return   x000D          valuesParams   function params   x000D              paramsResult       x000D              params   params replace          replace         split   amp     x000D               x000D              for x in params   x000D                  paramsKeyTmp   params x  split       x000D                   x000D                     Si el parametro esta disponible anexamos al vector paramResult x000D                  if  paramsKeyTmp 1          amp  amp  paramsKeyTmp 1           amp  amp   x000D                      paramsKeyTmp 1      null             x000D                       x000D                      paramsResult push params x    x000D                    x000D                x000D               x000D              return paramsResult  x000D            x000D        x000D     x000D   x000D   controller  SearchController   function  scope   http  routeParams  log searchCustom   x000D       ctrl   this  x000D       x000D      var valueParams   searchCustom valuesParams  routeParams value   x000D      valueParams   valueParams join   amp     x000D   x000D       http   x000D          method    GET   x000D          url  webservice  q   valueParams x000D         then  function successCallback response   x000D          data   response data  x000D           scope cantEncontrados   data length   x000D           scope dataSearch   data  x000D           x000D          function errorCallback response   x000D          console log response statusText   x000D         x000D         x000D     x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body ng-app  myApp  gt  x000D   lt div ng-controller  SearchController  gt  x000D   lt form action      gt  x000D                             x000D                               x000D                               lt input ng-model  param1   x000D                                     placeholder  param1    gt  x000D                               x000D                               lt input  ng-model  param2   x000D                                      placeholder  param2   gt  x000D                           x000D   lt  -- Implement in the html code  x000D   param1   param1   amp param2   param2    - gt  this is a one variable  the factory searchCustom split and restructure in the array params x000D  -- gt            x000D                           lt a href   seach  param1   param1   amp param2   param2     gt  x000D                               lt buttom ng-click  searchData     gt Busqueda lt  buttom gt  x000D                           lt  a gt  x000D                       lt  form gt   x000D   lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to angularjs