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!!!
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>