Fetching particular json key from controller AngularJS 1

Question

Hi I am new in AngularJS and trying to fetch and show json key data separately to console window. I can able to fetch entire json data , but unable to fetch datas within a particular node. Where am I going wrong ?

Service.js

app.service("AppService", function($http) {
    return {
       network: [],
       getAllService: function(network){

        return $http({
            method: 'GET',
            url: 'http://99.126.4.6:3200/app/json/allDatas',
            headers: {'Content-Type': 'application/json'} 

        })
                .then(function(data) {
                    return data;
                })
    }
    }
});

Controller :-

app.controller('getController', ['$scope','$http','AppService','$localStorage', function ($scope,$http,AppService,$localStorage) {


            $scope.load = AppService.getAllService();
            $scope.load.then(function(data) {
            $scope.getAllData = data; 
            $scope.getId = data.ID;
            $scope.getName = data.Name;
            $scope.getDescription = data.Description;
            console.log($scope.getId + $scope.getName + $scope.getDescription);
            })

}]);

When I console getAllData I can see entire json response.But unable to fetch inner keys.

JSON response:-

Data
Array(1)
0
:
{$id: "1", ID: 1, Name: "APP", Description: "Something", Segments: Array(3)}

Answer 1

You are mixing the old syntax with a new one: .success vs. .then

.then() returns an Http Promise which wraps your response in an object. To pull out your data, you need to access .data first.

Fix this line from:

.then(function(data) {
  return data;
})

to

.then(function(data) {
  return data.data;
})

Answer 2

data is an array, so access it's value by index

    $scope.load = AppService.getAllService();
    $scope.load.then(function(data) {
    angular.forEach(data, function(value) {
       console.log(value.ID+"   "+value.name++"   "+value.escription);
    });
    })