javascript - AngularJS $resource query returns array with a function in it, which is not does not fit well when iterating throug

admin管理员组

文章数量:1344624

I have added a custom Array.prototype.functionName to my js file. I am using AngularJS 1.2.3 and when I call $resource to return a query, it appends that custom function in the response array. when i iterate over the response array, it return exceptions when parsing the custom function, that is what i believe. Can anyone suggest me how to work around this problem

Array.prototype.functionName = function(){
    //sorting
}

I call my $resource like this in my service

return $resource('/url',{},{
    'List':{
         method: 'GET',
         isArray: true
    }
});

and call it in my controller

returnResource.List().$promise.then(function(Data){
    console.log(Data); //Data has my custom function append at the end
    for(var i in Data){
        //do something
    }
});

I have added a custom Array.prototype.functionName to my js file. I am using AngularJS 1.2.3 and when I call $resource to return a query, it appends that custom function in the response array. when i iterate over the response array, it return exceptions when parsing the custom function, that is what i believe. Can anyone suggest me how to work around this problem

Array.prototype.functionName = function(){
    //sorting
}

I call my $resource like this in my service

return $resource('/url',{},{
    'List':{
         method: 'GET',
         isArray: true
    }
});

and call it in my controller

returnResource.List().$promise.then(function(Data){
    console.log(Data); //Data has my custom function append at the end
    for(var i in Data){
        //do something
    }
});

• javascript
• arrays
• angularjs

Share Improve this question Follow edited Apr 9, 2014 at 16:51 Savitoj Cheema asked Apr 9, 2014 at 16:14 Savitoj CheemaSavitoj Cheema 50022 gold badges99 silver badges2424 bronze badges 6

• Not sure if you fully understand how resource works.. can you update the post to show the url you want to call ? – Nix Commented Apr 9, 2014 at 16:22
• You need to give us the code that is crashing, because I just successfully tested your example. plnkr.co/edit/HwSBYEo8xfPiH2WC8QWP – Nix Commented Apr 9, 2014 at 16:33
• in my $promise.then function, I iterate over the response Data, which i get from Django rest framework, looks like [b,b,b,b,...,$promise,$resolved,functionName]. it renders all the b objects but throws exception at the end and terminates my iteration. if I ment out functionName definition, it doesn't show up in Data but still shows the same exception – Savitoj Cheema Commented Apr 9, 2014 at 16:42
• Can you update the above and show how you are iterating? Both angular.forEach and array.forEach work... – Nix Commented Apr 9, 2014 at 16:45
• @Nix i have edited, how I am iterating over Data, I think i try should use angular.forEach – Savitoj Cheema Commented Apr 9, 2014 at 16:53

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 9

You are looping over the properties([0],[1], length, $promise, etc) of the array versus the items.

For in is not correct in this case that says hey I want to loop over every property of this array which includes the array items, but it also includes some other ng-resource`y things.

You should be using angular.forEach, Data.forEach, or go old school and use a for(i;i<Data.length;i++)

I can see you don't fully understand what ng-resource is returning; The response from the query/array looks like this:

sort me![Resource, Resource, $promise: Object, $resolved: true, ...]
0: Resource
  id: "nix"
  __proto__: Resource
1: Resource
  id: "nix2"
  __proto__: Resource
$promise: Object
$resolved: true
length: 2
__proto__: Array[0]
    .. array funcs
    forEach: function forEach() {
        [native code]
    }
    functionName: function () {
    }
     ...

Plunkr for your example

Array.prototype.functionName = function(){
    //sorting
    console.log("what is this...?", this, this.length);
    this.forEach(function(item){
        console.log(item);
    });
}

app.controller('TestCtrl', function($scope, $resource) {
    $scope.resource = $resource('url.json',{},{
                    'List':{
                         method: 'GET',
                         isArray: true
                    }
                });

    $scope.resource.List().$promise.then(
        function(data){
            console.log("List", this);
            data.functionName();
    });
   $scope.resource.query().$promise.then(
        function(data){

            console.log("query", this);
            data.functionName();

    });    

});

---

I included the out of the box way to do REST List using the query. Your List call and my Query call are doing the exact same thing they are hitting the url /Api and are expecting an array to be returned.

本文标签：