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

【问题标题】：How to push JSON Objects and create a nested one in AngularJs如何推送 JSON 对象并在 AngularJs 中创建嵌套对象
【发布时间】：2017-09-28 19:33:18
【问题描述】：

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

我有这段 AngularJs 脚本，它是我的角度控制器的一部分。我正在尝试将一些数据发布到我从多步骤向导表单中获取的服务器。在服务器端，我已经实现了（我是后端开发人员），所以没有什么可怕的，但我需要在尝试 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"
    }
}

谢谢！！！

【问题讨论】：

标签： angularjs json post array-push

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

完全同意你的观点，这种方式对开发人员更友好。