Build a HTTP Query String to JSON Online Converter in Browser Using Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a http query string to json online converter in browser using javascript. All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<h1 class="text-center pb-4">Query String to JSON</h1>
<input placeholder="Query String" class="form-control" onInput="convertQS(this.value)" />
<pre><code>{}</code></pre>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css"/>

<script src="https://unpkg.com/tiny-querystring/dist/tiny-querystring.umd.js"></script>

 

 

 

style.css

 

body {
     padding: 1em;
}
 .form-control {
     padding: 1em 1em;
}
 pre {
     padding: 1em 0;
}
 pre {
     padding: 0.5em;
     border: 1px solid #ccc;
}

 

 

 

script.js

 

 

document.querySelector("input").addEventListener("change", event => {
  console.log(event);
})

function convertQS(val) {
  if (val[0] === '"' || val[0] === "'") {
    val = val.substring(1,((val.length)-1));
  }
  
  const parsed = tinyQuerystring.parse(val)
  document.querySelector("code").innerHTML = JSON.stringify(parsed, null, 2);
}

Leave a Reply