How to return and array inside a JSON object in Angular.js

Question

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.

Anthony Chu · Accepted Answer · 2014-03-28 18:38:26Z

3

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

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

edited Mar 28, 2014 at 18:38

answered Mar 28, 2014 at 18:28

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pedropeixoto Over a year ago

Yea I tried that already, it returns as "undefined" for whatever reason I can't explain.

Anthony Chu Over a year ago

Just noticed it's inside of an array. Updated answer.

pedropeixoto Over a year ago

Oh but of course. I feel dumb now. Thanks man! This is exactly what I was shooting for, simple and efficient.

Nix · Accepted Answer · 2014-03-28 18:39:46Z

1

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

edited Mar 28, 2014 at 18:39

answered Mar 28, 2014 at 18:29

Nix

58.8k31 gold badges154 silver badges205 bronze badges

3 Comments

pedropeixoto Over a year ago

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.

Nix Over a year ago

Updated above. Just use promise.then(successFunc, errorFunc)

pedropeixoto Over a year ago

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.

Collectives™ on Stack Overflow

How to return and array inside a JSON object in Angular.js

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related