如何使用angular JS将JSON对象添加到JSON数组中?

时间:2015-10-05 11:08:35

标签: json angularjs

解析单个json对象时遇到问题。

假设以下数据来自服务器

        {
            "root": {
                "data": [
                    {
                        "name": "Raj",
                        "age": "22"
                    },
                    {
                        "name": "Janu",
                        "age": "22"
                    }
                ]
            }
        }

我的剧本是

的script.js

        var myApp=angular.module('myApp',[]);
        myApp.controller('myCtrl', function($scope, $http){
           $http.get("manydata.json")
            .success(function(response) {
              $scope.myDatas = response.root;
            });
        });

HTML

    <div ng-repeat="i in myDatas.data">

          Name: {{i.name}}
          Age: {{i.age}}

     </div>

响应数据大于1时没问题。但如果响应数据为1则json将为:

    {
      "root": {
        "data": {
          "name": "Raj",
          "age": "22"
        }
      }
    }

如何一般地解析这些json数据?

PLNKR:http://plnkr.co/edit/W4YK6BDtIBfVhnPpHVm1?p=preview

4 个答案:

答案 0 :(得分:3)

您可以将传入数据规范化为始终为数组。使用Array.prototype.concat方法很方便:

$http.get("singledata.json")
.success(function(response) {
  $scope.myDatas = response.root;
  $scope.myDatas.data = [].concat($scope.myDatas.data);
});

演示: http://plnkr.co/edit/UUWtDBK8qID1XoYeMXhu?p=preview

答案 1 :(得分:3)

我会检查数据是否是数组,如果没有,只需将数据修改为数组:

像这样:

 $http.get("singledata.json")
.success(function(response) {
  if(response.root.data && !angular.isArray(response.root.data)){
    var object = response.root.data;
    response.root.data = [];
    response.root.data.push(object);
  }
  $scope.myDatas = response.root;
});

答案 2 :(得分:3)

您需要稍加更改,请检查responsedata.root.data的类型。如果它不是数组,则将其转换为数组。这是你的代码变成了。 这是plnkr

// Code goes here

var myApp=angular.module('myApp',[]);
myApp.controller('myCtrl', function($scope, $http){
   $http.get("singledata.json")
    .success(function(response) {
      if(response.root.data && !(response.root.data instanceof Array )){
        response.root.data=[response.root.data]
      } 

      $scope.myDatas = response.root;

    });
});

答案 3 :(得分:2)

您可以检查数据是否为数组。如果没有,则将数组创建为。检查此代码是否正常工作。

对于控制器:

var myApp=angular.module('myApp',[]);
myApp.controller('myCtrl', function($scope, $http){
$http.get("manydata.json")
.success(function(response) {
  var data = response.root.data;
  if(data.constructor === Array){
  $scope.myDatas = data;
  }else{
    $scope.myDatas = new Array(data);
  }
});
});

对于html:

  

 <div ng-repeat="i in myDatas">

      Name: {{i.name}}
      Age: {{i.age}}

 </div>

  

希望这会有所帮助。