How To Pass Parameter In Window Location In Javascript

John on September 07, 2020

URL parameters are used to ship data server-side in a key-value pair format in an HTTP GET or Post request. Sometimes y'all will need to go URL parameter information client-side for your JavaScript program.

In this tutorial, we will learn how to get URL parameters with JavaScript and look at some of the dissimilar ways we can work with them.

A typical URL with parameters for an HTTP Get search query might look something similar this:

            https://example.com?search=eggs&blazon=food&active=i                      

Become the URL Parameters

There is no built-in JavaScript utility for directly getting URL parameters so we will have to grab them ourselves earlier doing anything else. We can do this by storing window.location.search as a variable.

                          var              query              =              window              .              location              .              search              ;              panel              .              log              (              query              );                      

            ?search=eggs&type=food&active=1                      

Using the URLSearchParams Interface

Now we take the URL parameter cord set equally a variable we can turn information technology into an object of the URLSearchParams interface.

                          var              paramters              =              new              URLSearchParams              (              query              );                      

URLSearchParams is designed to brand working with URL parameters like shooting fish in a barrel. Permit'south get the value of the parameter search from the example to a higher place using the URLSearchParams.get() method.

                          var              searchParam              =              paramters              .              get              (              'search'              );              panel              .              log              (              searchParam              );                      

            eggs                      

Check a URL Parameter Exists with the URLSearchParams.has() has Method

To bank check if a parameter exists nosotros tin can utilize the URLSearchParams.has() method in an if statement.

                          //?search=eggs&type=food&active=1              if              (              paramters              .              has              (              'oranges'              ))              {              panel              .              log              (              true              );              }              else              {              console              .              log              (              false              );              }                      

            false                      

Go all Values with the Same Parameter Name

Let's say we had a query string with 3 parameters called category. To get all both the category values and put them in an array we tin can use the URLSearchParams.getAll() method and pass the proper noun of the parameter inside the () (parenthesis).

                          // var query = ?search=eggs&blazon=food&active=one&category=1&category=two&category=3              var              query              =              window              .              location              .              search              ;              var              paramters              =              new              URLSearchParams              (              query              );              var              category_value_array              =              paramters              .              getAll              (              'category'              );              console              .              log              (              category_value_array              );                      

            ["one", "two", "3"]                      

Iterate over URL Parameters

Information technology is possible to iterate over the keys, values and entires of a URLSearchParams object. Permit's take a look at some examples of this in activity.

                          // var query = ?search=eggs&type=food&active=1&category=1&category=2&category=3              var              query              =              window              .              location              .              search              ;              var              paramters              =              new              URLSearchParams              (              query              );              var              keys              =              paramters              .              keys              ();              var              values              =              paramters              .              values              ();              var              entries              =              paramters              .              entries              ();              for              (              let              1000              of              keys              )              {              console              .              log              (              k              );              }                      

            search type active [3]category                      

                          for              (              permit              v              of              values              )              {              console              .              log              (              v              );              }                      

            eggs nutrient [2] ane 2 3                      

                          for              (              permit              e              of              entries              )              {              console              .              log              (              e              );              }                      

            ["search", "eggs"] ["type", "nutrient"] ["active", "1"] ["category", "1"] ["category", "2"] ["category", "three"]                      

All the Methods Bachelor in the URLSearchParams interface

For reference here are all the methods available on the URLSearchParams interface for working with parameter objects.

• URLSearchParams.append() - append central/value pair as a new search parameter.
• URLSearchParams.delete() - delete a specified search parameter and its value
• URLSearchParams.entries() - returns an iterable key/value listing of all parameters
• URLSearchParams.forEach() - iterate through all values
• URLSearchParams.get() - go value by parameter proper name
• URLSearchParams.getAll() - get all the values by parameter proper noun
• URLSearchParams.has() - check a parameter exists. returns true or false
• URLSearchParams.keys() - gets an iterable list of parameters
• URLSearchParams.set() - set a value to a parameter proper name
• URLSearchParams.sort() - sorts list by cardinal name
• URLSearchParams.toString() - to cord
• URLSearchParams.values() - gets an iterable list of values

Determination

You now know how to get URL parameters and work with them using JavaScript.

url browser

Source: https://www.skillsugar.com/how-to-get-url-parameters-with-javascript

Posted by: mashburnguideare.blogspot.com

Share this post