Fetch query data from URL using javascript
Tags: javascript, webdev, codenewbie, productivity
Published: 2020-04-27 14:47:38

*Photo by [Tim van der Kuip](https://unsplash.com/@timmykp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/web-location?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*

> 
Have you ever used the URL's query parameter into a page? I'm sure most of us did, share me in a comment how'd you done it.

Before going ahead, I would like to welcome you to a new episode of series call *Javascript Useful Snippets*. In this series, I'm sharing some shortcodes and useful functions that can let you make your code faster and neat.  So, if you haven't read my previous episodes [articles](https://dev.to/rajnishkatharotiya) please check it out here or else stay tuned till the end to learn something new 😋 .

Getting query parameters from URL is not a hard job but if you are writing it all again-n-again then it's bad practice. So in solution, I defined one global function into an app called getUrlParams(). This function takes URL and in output, returns object with key-value pair of parameters *( data of URL )* if any consist into URL else returns an empty object.

## What is inside getUrlParams() ?

```
const getUrlParams = url => {
  const paramsData = url.match(/([^?=&]+)(=([^&]*))/g) || []        // [ "key=value", "key2=value2"]

  return paramsData.reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );
}
```

In function first, I used regex (`/([^?=&]+)(=([^&]*))/g`) to get an array of data with match() method of string *( this method will create a collection of records which match with given string - in our case, it's the regex for `key=value` formatted data)* and stored into one constant with fallback value as [].

Next, By using the reduced method on an extracted collection of data I've created an object with key-value pair. To do that, inside of reduce I'm first finding an index of "=" into each record and from 0 to founded index string; I stored it as key, and after the founded index data; I stored it as the value of that key. In last just returned the whole function's output as a result of this function. 

## How to use getUrlParams() ?

```
getUrlParams('http://dev.to/page?name=Rajnish&surname=Katharotiya'); // {name: 'Rajnish', surname: 'Katharotiya'}
getUrlParams('dev.to'); // {}
```

As you have seen, with the first URL input it's returning an object with key-value pair of provided data into the path whereas the next given empty object because location path doesn't have any params present in it.
{% youtube COPgOrnt0E4 %}
This function becomes very useful for me wherever I need to extract data from URL just pass it to this and in return, I'll get the organized object without hurdle 😀. So, I thought to share it with you guys too. I hope you liked my explanation ( if yes, please hit like ❤️ button ) and if you learned something new or found informative then hit the follow button too from [here](https://dev.to/rajnishkatharotiya) to stay updated with me as I'm learning & sharing every day something useful. 😋

Also follow/subscribe me on my social media account to connect with me : [twitter](https://twitter.com/RajnishK00), [youtube](https://www.youtube.com/channel/UCvNjso_gPQIPacA6EraoZmg)