The-NodeJS-Master-Class icon indicating copy to clipboard operation
The-NodeJS-Master-Class copied to clipboard

Section 3 Parsing Query String shows a weird queryStringObject

Open marshallshelly opened this issue 5 years ago • 2 comments

This is code I use (same as in the masterclass, except for the const instead of var)

/*
 * Primary file for the API
 */

// Dependencies
const http = require("http");
const url = require("url");

// The server should respond to all requests with a string
const server = http.createServer(function (req, res) {
  // Get the URL and parse it
  const parsedUrl = url.parse(req.url, true);

  // Get the path
  const path = parsedUrl.pathname;
  const trimmedPath = path.replace(/^\/+|\/+$/g, "");

  // Get the query string as an object
  const queryStringObject = parsedUrl.query;

  // Get the HTTP Method
  const method = req.method.toLowerCase();

  // Send the response
  res.end("Hello World!\n");

  // Log the request path
  console.log(
    "Request received on path: " +
      trimmedPath +
      " with method: " +
      method +
      " and this query string: ",
    queryStringObject
  );
});

// Start the server, and have it to listen on port 3000
server.listen(3000, function () {
  console.log("The server is listening on port 3000 now");
});

Whenever I run the code, and visit the URL http://localhost:3000/foo?fizz=buzz or run cURL on it, I get the console log as Request received on path: foo with method: get and this query string: [Object: null prototype] { fizz: 'buzz' }

Why do I get a [Object: null prototype] inside the log?

marshallshelly avatar Sep 05 '20 02:09 marshallshelly

@CodingXD

This is code I use (same as in the masterclass, except for the const instead of var)

// Dependencies
const http = require("http");
const url = require("url");

// Get the query string as an object
const queryStringObject = parsedUrl.query;

Whenever I run the code, and visit the URL http://localhost:3000/foo?fizz=buzz or run cURL on it, I get the console log as Request received on path: foo with method: get and this query string: [Object: null prototype] { fizz: 'buzz' }

Why do I get a [Object: null prototype] inside the log?

The reason is that based on the Node.js documentation: The object returned by the querystring.parse() method does not prototypically inherit from the JavaScript Object. This means that typical Object methods such as obj.toString(), obj.hasOwnProperty(), and others are not defined and will not work.

In order to workaround this, you need to stringify and then parse the queryStringObject as follows:

const queryString = JSON.stringify(parsedUrl.query, null, 4)
const queryStringParsed = JSON.parse(queryString)

This way, you can get rid of the null prototype attached to the "queryString"

NaderBhrr avatar Nov 23 '20 15:11 NaderBhrr

For me, the console message shows up if I use a path without a query string, but not if I include a query string. So for example, if I type curl localhost:3000/foo I see "Request received on path: foo with this method: get and with these queryString parameters: {}". But if I add a query string, like curl localhost:3000/foo?fizz=buzz the console message never appears.

Any idea why that might be?

I've tried the code both as it was explained in the video, as well as with the JSON.stringify and JSON.parse mentioned above. Both give the same result (meaning both don't work if I include a query string in my URL). Instead I see no matches found: localhost:3000/foo?fiz=buzz. As if the query is being performed in the terminal.

tyleryoungblood avatar Feb 08 '21 22:02 tyleryoungblood