current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 3 down vote favorite
2

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:

components.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.

share|improve this question
up vote 3 down vote accepted

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

components.success(function(data) {
  $scope.products = data[0].products;
});
share|improve this answer
    
Yea I tried that already, it returns as "undefined" for whatever reason I can't explain. – pedropeixoto Mar 28 '14 at 18:37
    
Just noticed it's inside of an array. Updated answer. – Anthony Chu Mar 28 '14 at 18:38
1  
Oh but of course. I feel dumb now. Thanks man! This is exactly what I was shooting for, simple and efficient. – pedropeixoto Mar 28 '14 at 18:43
up vote 1 down vote

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')
  }
);
share|improve this answer
    
Never worked with promises, I'll have to check it out. What am I supposed to do in the controller to get the data with a promise? the "success" doesn't exist in promises apparently. – pedropeixoto Mar 28 '14 at 18:38
    
Updated above. Just use promise.then(successFunc, errorFunc) – Nix Mar 28 '14 at 18:40
    
Interesting. I'll have to look into promises more in the future. For now, the accepted answer is a quick fix for what I was aiming for. Thanks for the tip, I'll keep it in mind in the future. – pedropeixoto Mar 28 '14 at 18:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.