Accepting PUT requests on a JavaScript web server

I'm facing an issue retrieving PUT requests from a service within my Angular application. The problem lies in the fact that I cannot access the data from the request's body as it returns undefined. Below is the code snippet for reference.

ANGULAR

setSessionName(sessionId: number, newSessionName: string): Observable<Session> {
    const body = {
        sessionId: sessionId,
        newName: newSessionName
    };
    return this.httpClient.put<Session>(`${this.baseUrl}/set-session-name`, body);
}

SERVER

const express = require('express');
const cors = require('cors');

const serverPort = 8080;

const app = express();
app.use(cors({
    origin: ['http://localhost:4200']
}));

app.put('/set-session-name', (httpRequest, httpResponse) => {
console.log(httpRequest.body); // Output: undefined
httpResponse.sendStatus(200);
});

app.listen(serverPort, () => {
    console.log(`Server running at http://127.0.0.1:${serverPort}`);
})

Answer №1

To enable your node-server to support json encoded bodies, it is essential to include app.use(express.json());

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I find the name of a function in TypeScript?

Does anyone know how to retrieve the name of a function passed in as a parameter? console.clear(); class A{ test(){ } testCall(fnc:Function){ console.log(fnc.name); // I want it to display 'test' here, not empty console.log( ...

Response coming from an ajax call in the form of a JSON

With the JSON string provided below: {cols:[{"id":"t","label":"Title","type":"string"},{"id":"l","label":"Avg ","type":"string"},{"id":"lb","label":"High","type":"string"},{"id":"lo","label":"Low","type":"string"}],rows:[{"c":[{"v":"Change navigation"},{"v ...

When a controller includes Axios or Node HTTPS requests, Express fails to send a response

Currently, I am in the process of integrating with an external webhook through Wix.com's API. However, I have encountered a problem where the presence of an Axios request or a raw Node HTTP/HTTPS request is causing issues with sending the response. B ...

The server tag is displaying an error due to incorrect formatting in the hyperlink data-binding section

I'm currently facing an issue with the formatting of my hyperlink. The text part of the hyperlink is working fine, which leads me to believe that the problem lies within the JavaScript. However, I am unable to pinpoint the exact issue. <asp:Templa ...

What is the best method for implementing intersection types within an angular template?

While working with intersection types in an Angular template, I faced a challenge. In my component's TypeScript file, I defined the following input: export class ExampleClassComponent { ... @Input() items: Array<InfoItem> | Array<InfoItem ...

Unable to submit CSV file for Controller Action

I am encountering an issue with uploading a csv file to my backend action method. I have an action method called UploadPropertyCSV in Controller PropertyController that is supposed to process the file and add it to the database. However, when I click submi ...

Insert a new row at the top of the AngularJS table

How can I add a row to the beginning in Angular? HTML: <title>Add Rows</title> <link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"> <script src="https://ajax.google ...

Utilizing System.import with Webpack 2 and React for splitting code and managing nested routes

I followed the instructions from a tutorial article on Modus Create titled Code Splitting for React Router with ES6 Imports to create an app. I made some modifications by adding children routes, resulting in the following router configuration: function er ...

Struggling with a straightforward issue in Ajax that is proving to be a challenge to resolve

I've written a simple code to call an asmx webservice (xml). function maxTransaccion() { $.ajax({ type: "POST", url: "WebService.asmx/MAxTransaccion", contentType: "application/json; charset=utf-8", dataType: "json ...

Is it necessary to also include template-only attributes in my controller's definition?

I'm working on a directive template that features a basic toggle variable. <div ng-mouseenter="$ctrl.myToggle = true" ng-mouseleave="$ctrl.myToggle = false"> ... </div> <div ng-if="$ctrl.myToggle"> ... toggled content </div> ...

Steps to Create Javascript Image Zoom Effect on Mouse Hover

Looking to implement a feature on my website located at www.thetotempole.ca/javas2.html/. Basically, I have a table with images and I want them to enlarge when a user hovers over them and return to normal when the cursor is moved away. Is there a way to ac ...

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

Pop-up website opening with fixed dimensions error

On my webpage, I have a terminal where you can type commands and receive output. For example, typing "/unsolvedproblems" displays a list of unsolved problems with a hyperlink. I've been trying to make the hyperlink open in a popup window with a fixed ...

Update a portion of the list items

Here is the HTML code I am working with: <ul id="info"> <li> <span>Name:</span>Charis Spiropoulos </li> ... I need to change the content of the <li> element that is not within the span. How can I do this? Cur ...

Unable to retrieve information from server

enter image description here <!DOCTYPE html> <html ng-app="myApp"> <head> <title>ContactApp</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootst ...

Tips for effectively crafting a component capable of managing both a value and an observable for that specific value

I'm actually curious about two things. When is it appropriate to pass an observable of an object into a component versus resolving it with the | async method? If I want to create a versatile reusable component that can handle both scenarios - accept ...

What is the best method for incorporating a half circle in D3 utilizing designated function parameters?

My query revolves around enhancing this particular chart by filling only half of the circle with a specific group color. This post on Stack Overflow provides insights into creating half circles using D3.js. Below is an excerpt from the original code: va ...

Is it possible to use ngFor with an object instead of an array?

Encountering this console error: Unable to locate a supporting object '[object Object]' of type 'object'. NgFor specifically requires binding to Iterables like Arrays. services.ts private url = "https://api.iextrading.com ...

What is the most efficient method for eliminating an item from an array based on a specific property?

Is there a way to eliminate the object in this array where b equals 2? var arr = [{a: 1, b: 2}, {a: 3, b: 4}, {a: 5, b: 6}, {a: 7, b: 8}]; ...

Component state does not reset upon toggling

I have been exploring ways to conditionally display components. Handled externally: {show && <MyComponent />} Handled internally: const MyComponent = () => { const [externalState] = useContext(); const [state, setState] = useState(" ...