Imagine the following JSON API:

[
  {
    "id": "1",
    "name": "Super Cateogry",
    "products": [
      {
        "id": "20",
        "name": "Teste Product 1"
      },
      {
        "id": "21",
        "name": "Teste Product 2"
      },
      {
        "id": "22",
        "name": "Teste Product 3"
      }
    ]
  }
]

Is there anyway for me to only return the products array with Angularjs?

I have a simple service calling the JSON:

services.factory("ProductService", function($http) {
    return {
        "getProducts": function() {
            return $http.get("/product/index");
        }
    };
});

That is being called in the controller like so:

ponents.success(function(data) {
  $scope.products = data;
});

But it returns the whole JSON as expected, I need it to return only the "products" array so I can iterate through it.

PS: This is merely a simple example to illustrate the problem, I realize that I could change the API to fit my needs in this case, but that's not the point.

Imagine the following JSON API:

[
  {
    "id": "1",
    "name": "Super Cateogry",
    "products": [
      {
        "id": "20",
        "name": "Teste Product 1"
      },
      {
        "id": "21",
        "name": "Teste Product 2"
      },
      {
        "id": "22",
        "name": "Teste Product 3"
      }
    ]
  }
]

Is there anyway for me to only return the products array with Angularjs?

I have a simple service calling the JSON:

services.factory("ProductService", function($http) {
    return {
        "getProducts": function() {
            return $http.get("/product/index");
        }
    };
});

That is being called in the controller like so:

ponents.success(function(data) {
  $scope.products = data;
});

But it returns the whole JSON as expected, I need it to return only the "products" array so I can iterate through it.

PS: This is merely a simple example to illustrate the problem, I realize that I could change the API to fit my needs in this case, but that's not the point.

• javascript
• arrays
• json
• angularjs

Share Improve this question Follow asked Mar 28, 2014 at 18:26 pedropeixotopedropeixoto 1,63322 gold badges2727 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You would just assign the products array to your scope property...

ponents.success(function(data) {
  $scope.products = data[0].products;
});

You could customize it via a promise, and do it yourself.

"getProducts": function() { 
        var promise = $q.defer();
        $http.get("/product/index").success(function(data){
            promise.resolve(data && data.products);
        }).error(function(msg){  
            promise.reject(msg);
        })
        return promise.promise;
}

How to use:

getProducts().then(
  function(data) {
    $scope.products = data;
  },  
  function(msg){
     alert('error')
  }
);