Building an Empty AngularJS Response with the Combination of Spring Boot and MongoDB

In my AngularJS application, I collect user input and store it in painting objects. These objects are then sent to my Spring Boot backend which saves them to a MongoDB server and returns an ID. However, when attempting to POST data to the server, I receive an empty response despite the object being successfully stored.

AngularJS Code:

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.1/angular.min.js"></script>
<body>

<div ng-app="myApp"  ng-controller="myCtrl">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>

  ...

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope','$http', function($scope,$http) {
        ...
    }]);
</script>

</body>
</html>

SpringBoot Java POST Method:

@RequestMapping(method = RequestMethod.POST, value = "/paintings")
public String save(@RequestBody Painting painting){
    repository.save(painting);
    System.out.println("Function called");
    return painting.getID();
}

Postman Response:

I am perplexed by the fact that I keep receiving an empty response in the browser console even though the server is indeed sending a response back.

Answer №1

It appears that the solution lies in accessing the data property from the response:

.then(function (response) {
   console.log(response.data);
 }

Answer №2

Thanks to the guidance of @Sajeetharan, I made some adjustments to my backend post request:

@RequestMapping(method = RequestMethod.POST, value = "/artworks")
public ResponseEntity<String> add(@RequestBody Artwork artwork){
    repository.save(artwork);
    System.out.println("Request processed");
    JSONObject json = new JSONObject();
    json.put("id", artwork.getId());
    return  ResponseEntity.ok(json.toString());
}

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

Having trouble retrieving the array index of JSON data in Vue JS?

I have a project that includes data from a JSON API and I'm trying to display the index of each data. For example, I can view the floors from array index 0 to 22, but I'm having trouble getting the array index for the flats on each floor. Each fl ...

What could be causing an error in my Vue app when attempting to process a payment using Google Pay on a mobile device, resulting in the message "Blocked a frame with origin

When implementing payment through Google Pay on Chrome desktop, it functions smoothly. However, an error occurs when attempting to pay using a smartphone, triggering an additional modal window with a card selection: vue.esm.js?a026:152 Uncaught (in promise ...

Transmitting the data from the input field

I'm currently stuck trying to figure out the logic behind my Ajax form submission. I am attempting to POST my form using Ajax and send certain values in the correct manner. Here is an example of my form: <form method="post" action="~/AJAXcalls/ca ...

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

Troubleshooting a Problem with AppCheck Firebase reCaptcha Configuration

Currently integrating Firebase with my Next.js project. I've been attempting to configure AppCheck reCaptcha following the documentation and some recommendations, but I encounter an issue when running yarn build The build process fails with the foll ...

Executing a JavaScript function when an element is clicked using inline

Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...

`Increase Your Javascript Heap Memory Allocation in Next.js`

We are facing a challenge with the development environment for our Next.js application. Issue The Javascript heap memory is consistently depleting. Here are the specific error logs: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out ...

Utilizing the JavaScript map method to structure API response data

Here is the JSON data I have: { "result": [{ "name": "a", "value": 20, "max": 100, "sale_value": [{ "no": 1, "name": "aaaaa", "price": 200 }, { "no": 2, ...

Implement a personalized click function for the delete icon in the mini cart

Is there a way to customize the click event for the remove button in the mini cart? function ajax_call(){ $.ajax({ url: ajax_url, type: 'post', data: {action : 'remove_from_cart','cart_item_key' : 10}, ...

modify the ng-invalid class when making changes to double entry fields

I am facing an issue with a password and password confirmation field that are linked using a directive. Additionally, I have CSS that sets the border color when ng-invalid. The problem arises when I enter the password in the confirm_password first and then ...

Having trouble getting the "If paused" feature to function properly in videojs

When my video is paused, I want to display an overlay on top of it. I found the following piece of code in the documentation: var isPaused = myPlayer.paused(); var isPlaying = !myPlayer.paused(); So, I tried implementing it like this: var isPaused = m ...

Store data in LocalStorage according to the selected value in the dropdown menu

Can you help me understand how to update the value of a localstorage item based on the selection made in a dropdown menu? <select id="theme" onchange=""> <option value="simple">Simple</option> <option valu ...

Displaying Hierarchical Data with AngularJS and ng-repeat

Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS. With some guidance from th ...

What strategies can be used to effectively perform a mongo db search that accommodates misspelled terms?

If I search for "wolrd," I would like documents containing "world" to be included in the results. ...

Can someone assist me in retrieving the information stored within an object?

I'm currently working on a Discord bot and I am in need of the user ID, specifically 'xxx', but I'm unsure of how to retrieve it. Here is what I have tried so far: n.mentions.users.User. -- n.mentions.users.User() This is what my code ...

Angular js preloads the background before displaying the image

Hey there! I have a question. When I load the page, I notice that the background of the "images class" loads before the ng-src image is loaded. Is there a way to fix this issue using Angular js? <div class="images" > <img ng-if="e ...

Having trouble with installing Recharts through npm

When I try to install recharts using npm, I encounter the following error message in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! ...

Angular 1.5 component causing Typescript compiler error due to missing semi-colon

I am encountering a semi-colon error in TypeScript while compiling the following Angular component. Everything looks correct to me, but the error only appears when I insert the this.$routeConfig array: export class AppComponent implements ng.IComponentOp ...

Next.js project encountered a TypeError with message [ERR_INVALID_ARG_TYPE]: The "to" argument is expected to be a string type

While working on a Next.js application, I came across a TypeError that is linked to the undefined "to" argument. This issue pops up when I launch my development server using npm run dev. Despite checking my environment setup and project dependencies, I hav ...

Ways to stop the transmission of the Origin HTTP header in the Chrome browser?

Scenario: I am managing a production web server, such as https://example.com, which is configured with CORS restrictions that do not allow localhost origins. Developers working on localhost are creating a new page/module that requires making AJAX calls t ...