How to push JSON Objects and create a nested one in AngularJs

Question

I end up with a frontend task on my desk yesterday and since our frontend dev is on annual leave I need some help.

I have this piece of AngularJs script which is part of my angular controller. I am trying to post some data to the server which I fetch from a multi-step wizard form. On the server side I have already the implementation (I am a backend dev) so nothing scary there but I need to tweak somehow the JSON object before I try to POST so I can bind that nicely with my Spring boot rest controller.

That's the piece of code.

//These are my guys which I am trying to push    
$scope.department = {};
$scope.user1 = {};
$scope.user2 = {};


//Some POST method
$scope.save = function () {

    var data = [{}];
    //here I do the push but it looks like I've no idea what I am doing
    data.push($scope.department);
    data.push($scope.user1);
    data.push($scope.user2);

    var config = {
            headers : {
                'Content-Type': 'application/json'
            }
        }

        console.log(JSON.stringify(data));

        $http.post('http://localhost:8080/api/', data, config)
        .success(function (data, status, headers, config) {
            $scope.PostDataResponse = data;
        })
        .error(function (data, status, header, config) {
            console.log(data);
        });
    };

This is the JSON output of what I have achieved with the above script

[
    {
        "department": "foo",
        "code": 1234
    },
    {
        "firstName": "Megan",
        "lastName": "Fox"
    },
    {
        "firstName": "Margot",
        "lastName": "Robbie"
    }
]

This is the JSON output I am looking for

{
    "department": "foo",
    "code": 1234,

    "user1": {
        "firstName": "Megan",
        "lastName": "Fox"
    },

    "user2": {
        "firstName": "Margot",
        "lastName": "Robbie"
    }
}

Thank you!!!

Answer 1

I was able to replicate your JSON, can you please verify its correct?

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope, $http) {
  //These are my guys which I am trying to push    
  $scope.department = {
    "department": "foo",
    "code": 1234
  };
  $scope.user1 = {
    "firstName": "Megan",
    "lastName": "Fox"
  };
  $scope.user2 = {
    "firstName": "Margot",
    "lastName": "Robbie"
  };

  //Some POST method
  $scope.save = function() {
    var data = Object.assign({}, $scope.department);
    //here I do the push but it looks like I've no idea what I am doing
    data["user1"] = $scope.user1;
    data["user2"] = $scope.user2;

    var config = {
      headers: {
        'Content-Type': 'application/json'
      }
    }

    console.log(JSON.stringify(data));

    $http.post('http://localhost:8080/api/', data, config)
      .success(function(data, status, headers, config) {
        $scope.PostDataResponse = data;
      })
      .error(function(data, status, header, config) {
        //console.log(data);
      });
  };
  $scope.save();
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">

</div>

Answer 2

Please note that, you are looking output in the form of object, however, you created data variable as array. I like the answer given by "Naren Murali" but you can make it more developer friendly and easy to read:

var data = $scope.department;
    data.user1=$scope.user1;
    data.user2=$scope.user2;