CODEWITHSUNDEEP
jsonangularjs
max
max

Reputation: 623

AngularJS display JSON data in table

I am using AngularJS with RESTAPI, I am able to get the customers data sent from server in a JSON format. My Angular code snippet as below:

  app.factory("services", ['$http', function($http) {
  var serviceBase = '/api/album';
    var obj = {};
    obj.getCustomers = function(){
        return $http.get(serviceBase);
    };
    return obj;   
}]);
    app.controller('listCtrl', function ($scope, services) {
services.getCustomers().then(function(data){
    alert(JSON.stringify(data.data));
    $scope.customers = data.data;
    });
});

Here is my JSON data:

{
"data": [
    {
        "id": "1",
        "artist": "Gotye75",
        "title": "Making  Mirrors7"
    },
    {
        "id": "100",
        "artist": "ytttt5",
        "title": "1231"
    },
    {
        "id": "101",
        "artist": "65",
        "title": "565444555"
    },
    {
        "id": "102",
        "artist": "6",
        "title": "6"
    },
    {
        "id": "103",
        "artist": "y",
        "title": "yy"
    },
    {
        "id": "104",
        "artist": "ty",
        "title": "yt"
    },
    {
        "id": "109",
        "artist": "ytrer",
        "title": "yt"
    }
    ]
}

I am able to display the JSON data in table if my JSON does not contain the "data" hear. However if my jSON data comes with "data" header, it is unable to display. I am asking, what are the solution in Angular to parse the JSON object.

For example if it is in BackboneJS, i can simply do 

    parse: function (response) {
    //alert(JSON.stringify(response.data));
    return response.data;
}

How can i do it in Angular?

Upvotes: 1

Views: 9860

Answers (2)

max
max

Reputation: 623

I solved it by

app.controller('listCtrl', function ($scope, services) {
    services.getCustomers().then(function(data){
    //notice that i added the third data
    $scope.customers = data.data.data;
    }); 
});

Upvotes: 1

Anthony Chu
Anthony Chu

Reputation: 37550

$http resolves its promises with a response object. The data is accessed via the response object's data property. So to get to the array, you'd have to use

$scope.customers = data.data.data;

$http's promise is enhanced with a .success() convenience method which unwraps the response object...

services.getCustomers().success(function(data){
    alert(JSON.stringify(data.data));
    $scope.customers = data.data;
});

Upvotes: 4

Related Questions