Convert Query String to JavaScript Object

Introduction

In this lab, we will explore how to convert a query string or URL into an object using JavaScript. We will use the String.prototype.split() method to extract the parameters from the URL, then create an object using the URLSearchParams constructor and convert it into an array of key-value pairs. Finally, we will use Array.prototype.reduce() to convert the array into a JavaScript object. This lab will help you understand how to manipulate and extract data from URLs and query strings in JavaScript.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/SecurityGroup(["`Security`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") javascript/SecurityGroup -.-> javascript/web_sec("`Web Security Basics`") subgraph Lab Skills javascript/variables -.-> lab-28565{{"`Query String to Object`"}} javascript/data_types -.-> lab-28565{{"`Query String to Object`"}} javascript/arith_ops -.-> lab-28565{{"`Query String to Object`"}} javascript/comp_ops -.-> lab-28565{{"`Query String to Object`"}} javascript/array_methods -.-> lab-28565{{"`Query String to Object`"}} javascript/higher_funcs -.-> lab-28565{{"`Query String to Object`"}} javascript/spread_rest -.-> lab-28565{{"`Query String to Object`"}} javascript/web_sec -.-> lab-28565{{"`Query String to Object`"}} end

Converting Query String to Object

To convert a query string or URL to an object, follow these steps:

Open the Terminal/SSH and type node to start practicing coding.

Use String.prototype.split() to extract the parameters from the given url.

Use the URLSearchParams constructor to create an object and convert it to an array of key-value pairs using the spread operator (...).

Use Array.prototype.reduce() to convert the array of key-value pairs into an object.

Here is the code to convert the query string:

const queryStringToObject = (url) => [...new URLSearchParams(url.split("?")[1])].reduce( (a, [k, v]) => ((a[k] = v), a), {} );

Example usage:

queryStringToObject("https://google.com?page=1&count=10"); // {page: '1', count: '10'}

Query String to Object

Introduction

Skills Graph

Converting Query String to Object

Summary

Other JavaScript Tutorials you may like