Table of contents
As I embark on this transformative path, I am eager to collaborate with like-minded professionals, contribute to impactful projects, and embark on new challenges that push the boundaries of my skills and expertise. Lets Goooo💪🏼🚀
Fundamentals of Node JS
Parsing Query string from URL
A Query String is basically a key value pair, which we specify after a question mark in the URL. i.e: localhost:8000/products?id=10. The ID is the query string. In order to use multiple query strings we use the ampersand symbol & then we can specify another query string. i.e: localhost:8000/products?id=2&name=iphone. The name is another query string. To implement the query string in our code base, we need to import the URL package. i.e: const url = require("url"). This expression is going to return an object which will be assigned to the url variable.
The url package has a method called parse(). It receives two parameters but the second is optional. to use the parse() method, we have to pass in request.url as the first parameter and an optional boolean value as the second parameter. i.e: url.parse(request.url, true). If we specify true for the second parameter, the parse() method will pass the query string to the url and vice versa. The above expression will return an object so lets store it in a variable. i.e: const x =url.parse(request.url, true) and log the variable to the console. 👇🏼
NB: We're updating our code base from previous lessons. check the previous lessons if you have any confusions
Lets restart the server and see what's logged in the console. lets make a request to localhost:8000/products?id=2&name=iphone. We have an error page but in the console and object was logged👇🏼
The console object 👇🏼
The url object has a lot of properties but our only concern is the query property and the pathname property. The pathname property is basically storing the resource which is "/products" . The query object is storing the query string as its property. From the object we want to extract the query property and the pathname property. We will use the destructuring syntax to destructure the property name.
Since we want to extract the query and pathname property. We can also add an alias. which will store the resource name . Lets update our code base👇🏼
We commented out The path variable because it now been used as an alias to the pathname property. We want to that will be able to show the product details when a button is clicked so from the products.html file, we will change the show details button to a an a tag. 👇🏼
We commented out the previous button an added an a tag which is a link tag with the product id URL with {{%ID%}} as a placeholder for the query string id value. In order to be able to use this ID placeholder we need to update our code base. 👇🏼
In our Json object file, each product has a unique ID property and we want to replace the ID placeholder with the ID property. Lets restart the server and see the changes. on the localhost:800/products route we get the below response👇🏼
when we click on the show details button for any of the product lets checkout the url with the query string. 👇🏼
After the root url the query string was added with the clicked product ID.
Now we want to pass the value of this ID query string and based on the ID value we display the details of the corresponding product.
In the query variable we are going to have an object with the ID property of the value which we have in the query string. Lets got to "/products" route and update the code base. We need to first check if the query object has some properties using the if/else statement.👇🏼
And we get the below response on the web page because we clicked on the first item. 👇🏼
Based on the value of the ID we are getting different responses.
Next: Creating Reusable Function
See you soon😊🫡✌🏼...