Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Section 3 Parsing Query String shows a weird queryStringObject #19

Open
CodingXD opened this issue Sep 5, 2020 · 2 comments
Open

Section 3 Parsing Query String shows a weird queryStringObject #19

CodingXD opened this issue Sep 5, 2020 · 2 comments

Comments

@CodingXD
Copy link

CodingXD commented Sep 5, 2020

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?

@NaderBhrr
Copy link

@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"

@tyleryoungblood
Copy link

tyleryoungblood commented Feb 8, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants