如何推送 JSON 对象并在 AngularJs 中创建嵌套对象

Question

昨天我的办公桌上有一个前端任务，由于我们的前端开发人员正在休年假，我需要一些帮助。

我有一段 AngularJs 脚本，它是我的 angular 控制器的一部分。我正在尝试 post 一些数据到我从多步骤向导表单中获取的服务器。在服务器端，我已经实现了（我是后端开发人员）所以没有什么可怕的，但我需要在尝试 POST 之前以某种方式调整 JSON 对象，这样我就可以很好地绑定它Spring 引导休息控制器。

就是这段代码。

//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);
        });
    };

这是我用上面的脚本

得到的JSON输出

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

这是我正在寻找的 JSON 输出

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

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

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

谢谢！！！

Answer 1

我能够复制你的JSON，你能验证它的正确性吗？

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

请注意，您正在查看对象形式的输出，但是，您将数据变量创建为数组。我喜欢 "Naren Murali" 给出的答案，但您可以使它对开发人员更友好且易于阅读：

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

如何推送 JSON 对象并在 AngularJs 中创建嵌套对象

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

post

json

array-push

angularjs