Send data in JSON format from an AngularJS client to an Express server

Having an issue when trying to send a JSON Object from an AngularJS $http service to an Express Server. The server receives an empty object: "{}"

I've looked at this topic, but it hasn't resolved my problem: angular post json to express

This is the code for the Angular client:

self.postTicket = function(ticket){
        $http({
            url: baseUrl+"features/",
            method: "POST",
            body: ticket,
            headers: {'Content-Type': 'application/json'}})
}

I have verified that the "ticket" object is not empty

And here is the code for the Express server:

var express = require("express");
var request = require("request");
var bodyParser = require('body-parser')


var app = express();

app.use(bodyParser.json({}));

app.post('*', function (req, res) {
    console.log(req.body);
    res.status(200).send('OK');
});


app.listen(9000);

Any help in resolving this issue would be greatly appreciated. Thank you.

Answer №1

Replace body with the data property when making a request using $http

$http({
            url: baseUrl+"features/",
            method: "POST",
            data: ticket,
            headers: {'Content-Type': 'application/json'}})

Answer №2

Swap

self.sendTicket = function(ticket){
    $http({
        url: baseUrl+"features/",
        method: "POST",
        body: ticket,
        headers: {'Content-Type': 'application/json'}})

for

self.postTicket = function(ticket){
    $http({
        url: baseUrl+"features/",
        method: "POST",
        data: ticket,
        headers: {'Content-Type': 'application/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

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

Error: The AngularJS module encountered an unhandled error while trying to inject other modules

Encountering an issue in the Chrome console while running the code below: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.m ...

Confirm Submission Issue in HTML Form

During my testing of the blacklist confirmation dialog, I encountered an issue where clicking the OK button did not submit the form as expected. Instead, it seemed to be stuck in a loop where clicking the button had no effect and the dialog remained on scr ...

Learn how to deactivate the pause button with just one click and re-enable it once the popup appears using Angular2 and Typescript

Can anyone assist with solving an issue I am facing with a timer and a pause button? I need the pause button to be disabled once clicked, until a popup appears, then it should become enabled again. My code snippet is provided below: HTML: <button md-i ...

The SequlizeJS connection often times out unexpectedly

Our project backend is built on NodeJS, expressJS, and SequilizeJS serving as a RESTapi. This RESTapi is connected to a VueJS SPA. Currently, only a small group of 5 people are using this system. The majority of the interactions involve transactions. We ...

Utilization of JSON and XML formats in web API for handling requests and responses

I'm in the process of building a WEBAPI using .NET, and I need to decide whether to accept requests in XML or JSON. I'm unsure which one is the best practice and what their advantages are. Any suggestions on this would be greatly appreciated. Tha ...

Collecting CSV data using AngularJS DATA_URI

My current situation involves interacting with a reporting site that utilizes AngularJS and the CSV plugin to export statistics for a specific application. When using a browser, I can simply click on 'Download CSV' and AngularJS leverages Data_UR ...

Issue detected in the console: Angular and Express code linked with status code 200 displaying an error

I am attempting to delete data along with an image connected to that data via an image Id using a get route (since the delete route didn't work out for me). The data is successfully being deleted, but I keep receiving a 200 OK response followed by an ...

Retrieve pictures from Amazon S3 using AngularJS

Currently, I am working on a project where I am using AngularJS in the frontend to communicate with a Rails 4 API backend. Managing images is crucial for this project, which is why I decided to utilize Amazon S3. However, since I am new to this technology, ...

Typing should be positioned on either side of the declaration

When I define the type MyType, it looks like this: export type MyType = { ID: string, Name?: string }; Now, I have the option to declare a variable named myVar using three slightly different syntaxes: By placing MyType next to the variable ...

The UNHANDLEDREJECTION callback was triggered prematurely during asynchronous parallel execution

Asynchronously using parallel to retrieve data from the database in parallel. Upon each task returning the data, it is stored in a local object. In index.js, the cacheService.js is called. Inside cacheService.js, data is loaded from both MySQL and MongoDB ...

What is the best method for displaying the date/time with timezone in AngularJS?

While utilizing the AngularJS filter date, I have incorporated the following code snippet: var date = new Date("09 apr 2015 12:00:50 UT"); $filter('date')(date, "dd MMM yyyy hh:mm:ss a Z"); The current output is: 09 Apr 2015 08:19:04 PM + ...

What is the best way to link layout images in express.js in order to easily access them from within nested directories?

Currently, I have an express.js app that utilizes ejs (using jade for newer projects) and I am faced with a challenge in finding a clean and appropriate solution. In my layout.ejs file, I have included my header and footer. Thus far, my site has mostly be ...

What steps do I need to take to convert a view from a three.js camera and scene to a bcf cameraview?

I am attempting to convert a ifc.js viewer file into a bcf format. The ifc.js viewer utilizes a three.js webglrenderer along with a camera and scene setup. Shown below is an example: https://i.sstatic.net/oTphJ.png https://i.sstatic.net/8Dtag.png I would ...

Trouble with express-flash messages persisting alongside a custom passport callback

I am currently utilizing express 4, passport, and express-flash. Everything works smoothly when using the pre-built passport middleware function with failureFlash set to true. However, I encounter an issue when implementing a custom callback in my register ...

Resource loading unsuccessful in AngularJS project

Having an issue with my AngularJS tutorial. I encountered this error when trying to run the tutorial: Failed to load resource: the server responded with a status of 404 (Not Found) I am unable to figure out why this error is occurring. I have linked to t ...

Using PHP to validate a read-only textbox

I am trying to implement validation on a Datepicker that is set to readonly, but I am facing issues with my current code. Can someone please assist me? Below is the JavaScript code used for error trapping: <script type="text/javascript"> $(func ...

Using Javascript to modify a json file

Currently, I have a command that adjusts the server prefix based on user input. Below is the code snippet I am currently utilizing: client.on('message', message => { if (message.content.toLowerCase().startsWith(',prefix')) { const ar ...

Protractor experiencing sluggish performance on Internet Explorer11

When using Protractor to run my test cases in Internet Explorer 11, I noticed that it takes significantly longer compared to Firefox and Chrome. It even takes around 20 seconds just to enter the text "Hello" into a text box. Is there a way to improve the ...

Restoring the position of the <Rect/> element after dragging in a React + Konva application

In my attempt to make a Rect component snap back to its original position using ReactKonva, I defined a Toolbar class with certain dimensions and initial positions for the rectangle. However, after dragging the rectangle and attempting to reset its positio ...