title: AngularJS Empty Respose Using Spring Boot And Mongodb
body: <p>I have a <code>AngularJS</code> app where I take in user input and store it in a painting objects and then send it to my spring boot back-end that will store it to the <code>Mongodb</code> server and return an <code>id</code>, however when I try go POST anything to the server i get an empty response back, even though the object gets stored in the server.</p>
  
  <p>AngularJS code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.1/angular.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;div ng-app="myApp"  ng-controller="myCtrl"&gt;
    &lt;p&gt;Name : &lt;input type="text" ng-model="name"&gt;&lt;/p&gt;
    &lt;h1&gt;Hello {{name}}&lt;/h1&gt;
  
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    URL : &lt;input type="text" ng-model="painting.url"&gt;&lt;br&gt;
    Artist : &lt;input type="text" ng-model="painting.artist"&gt;&lt;br&gt;
    ArtistInfo : &lt;input type="text" ng-model="painting.artistInfo"&gt;&lt;br&gt;
    Title : &lt;input type="text" ng-model="painting.title"&gt;&lt;br&gt;
    Dated : &lt;input type="text" ng-model="painting.dated"&gt;&lt;br&gt;
    Medium : &lt;input type="text" ng-model="painting.medium"&gt;&lt;br&gt;
    Dimensions : &lt;input type="text" ng-model="painting.dimensions"&gt;&lt;br&gt;
    Credit : &lt;input type="text" ng-model="painting.credit"&gt;&lt;br&gt;
    &lt;button ng-click="submit()"&gt;Post&lt;/button&gt;
    &lt;pre&gt;{{painting | json}}&lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var app = angular.module('myApp', []);
      app.controller('myCtrl', ['$scope','$http', function($scope,$http) {
          $scope.name = "";
          $scope.painting = {
              url: '',
              artist: '',
              artistInfo: '',
              title: '',
              dated: '',
              medium: '',
              dimensions: '',
              credit: ''
          };
          $scope.submit = function(){
              console.log(JSON.stringify($scope.painting));
              $http({
                  method: 'POST',
                  headers: {
                      'Content-Type': 'application/json'
                  },
                  url: 'http://localhost:8080/paintings',
                  data: $scope.painting
              }).then(function (response) {
                  console.log(response);
              }, function (response) {
                  console.log("Error");
                  console.log((JSON.stringify(response)));
              });
              //$http.post('http://localhost:8080/paintings', $scope.painting).catch(console.error);
          };
      }]);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>SpringBoot Java POST Method:</p>
  
  <pre><code>@RequestMapping(method = RequestMethod.POST, value = "/paintings")
  public String save(@RequestBody Painting painting){
      repository.save(painting);
      System.out.println("Function called");
      return painting.getID();
  }
  </code></pre>
  
  <p>PostMan Response:</p>
  
  <p><img src="https://i.stack.imgur.com/NkZsL.png" alt="response"></p>
  
  <p>Not sure why I'm getting an empty response when I check the console in a browser, even though the server is sending back a response.</p>