How to add JSON object into JSON array using angular JS?

Question

I have problem while parsing single json object.

Assume that the below data get from server

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

And my script is

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>

I have no problem while the response data is more than 1. But If the response data is 1 then the json will be:

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

How to generically parse these json data ?

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

Answer 1

You need just slight change, check type of responsedata.root.data. If it is not array, convert it to array. Here is your code becomes. Here is 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;

    });
});

Answer 2

You can normalize incoming data to always be an array. It's convenient to use Array.prototype.concat method for this:

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

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

Answer 3

I would check if data is an array or not, and if not, just ammend the data to be an array:

Like this:

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

Answer 4

You can check the whether the data is array or not. If not then you create the array as. Check this code its working.

For controller:

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

For html:

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

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

 </div>

Hope this helps.