CODEWITHSUNDEEP
javascriptexpressvisual-studio-codetypeerror
Ryan Young
Ryan Young

Reputation: 51

VS Code - TypeError: Cannot read property 'toUpperCase' of undefined

I'm getting a TypeError when I modify an if statement with js on VSCode.

The following if statement worked before I added the .toUpperCase() method:

`ourApp.post('/answer', function(req, res) {
    if (req.body.skyColor.toUpperCase() == "BLUE") {
        res.send(
        <p>Congrats, that is the correct answer!</p>
        <a href="/">Back to homepage</a>
        )`

**note that I do have template literals where they needed to be, but they mess with the above formatting so I had to remove them.

But after I added the .toUpperCase() method above, I get the following TypeError:

TypeError: Cannot read property 'toUpperCase' of undefined at /home/ryan/JavaScript/test.js:16:27 at Layer.handle [as handle_request] (/home/ryan/JavaScript/node_modules/express/lib/router/layer.js:95:5) at next (/home/ryan/JavaScript/node_modules/express/lib/router/route.js:137:13) at Route.dispatch (/home/ryan/JavaScript/node_modules/express/lib/router/route.js:112:3) at Layer.handle [as handle_request] (/home/ryan/JavaScript/node_modules/express/lib/router/layer.js:95:5) at /home/ryan/JavaScript/node_modules/express/lib/router/index.js:281:22 at Function.process_params (/home/ryan/JavaScript/node_modules/express/lib/router/index.js:335:12) at next (/home/ryan/JavaScript/node_modules/express/lib/router/index.js:275:10) at /home/ryan/JavaScript/node_modules/body-parser/lib/read.js:130:5 at invokeCallback (/home/ryan/JavaScript/node_modules/raw-body/index.js:224:16)

I'm thinking there's an issue with my installation of express? I have the package.json files and all that installed in the working folder, though, so I'm not sure where there could be a corrupted file or anything.

Any ideas?

Upvotes: 1

Views: 641

Answers (3)

Ryan Young
Ryan Young

Reputation: 51

It works now, and I believe I know why:

I quit VS Code and started it back up about 3-4 times. The last time, I looked up the working folder in my directory and opened it up (right-click 'open with code'). Now everything works correctly.

I was certain I was already working from that folder in VSC so I'm a bit confused as to what exactly changed, but it works... so ¯_(ツ)_/¯

Upvotes: 1

Thiago Romano
Thiago Romano

Reputation: 587

Express by default does not parse the body. It is only available as a Stream.

The best solution I see for you is to use json() middleware before your endpoint.

Try adding:

// parse application/json
app.use(express.json())

// Your endpoint here

The app.use() function means that every request you get will go through the method specified, in this case it will parse the body of the request into the .body field of the req.

This assumes that your endpoint will be called with the correct Header (Content-Type: "application/json") and you are really sending the correctly formatted Json body.

It is a good idea to check if the contents of the body has the contents that you expect, this assertion will prevent many bugs and crashes of your code.

For this, there are many libraries for schema validation on Npm, just pick what suits you best.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707158

From your comments, it look like your incoming request is coming from a <form>.

And, in its default configuration, Express does not read and parse the body of any POST or PUT request for you automatically. Instead, you need to install the right middleware that will read and parse the body for you. In your case, an incoming <form> from the browser will usually be the application/x-www-form-urlencoded MIME type. To parse that, you would add this line:

app.use(express.urlencoded({extended:true}))

at some point before your app.post() handler. You can see the express documentation for this here. This middleware will check the mime type of the body and if it's is the type above that a form typically sets, then it will read the body of the incoming request and parse it and place the results into req.body so your request handler can then access the data in req.body.

If, after installing this middleware, it still isn't working, then we need to know more about exactly what's in the incoming http request so we can see exactly what is in the body. Assuming this is coming from a browser, you can go into the Chrome debugger (right-click in the page and click "inspect" and then go to the network tab before whatever browser action causes it to send the data to the server. Then, by looking at the list on the left of the screen in the network tab, you can find that specific request to your server, click on it and then the right pane will show you the details of the request.

Upvotes: 0

Related Questions