0

I have seen other questions relating to this and implemented the answers to the best of my understanding. But, I am unable to display the response in the view with ng-repeat. Here is my code.

JS file:

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http.get('http://localhost:3000/testdata').then(function(data) {
      $scope.resultset = data.data.resultset;
      console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
}]);

HTML:

<div class="wrapper-md" ng-controller="testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>

I am able to see the data in console. But, I am unable to see produce this in the view. I do not see why not. I am using the promise as well as initialized the variable so that ng-repeat would not choke.

Console response:

[Object, Object, Object, Object, Object]
0: Object
avatar: "img/a4.jpg"
followers: "2104"
name: "Chris Fox"
title: "Master Chef"
url: "#"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]
Aravind
  • 423
  • 6
  • 14

2 Answers2

2

This is due to scope issue. In Angular, you cannot swap an object or array directly.

To make it work, use angular.copy:

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $http
      .get('http://localhost:3000/testdata')
      .then(function(data) {
        angular.copy(data.data.resultset, $scope.resultset); // HERE
        console.log($scope.resultset);
      }, function(error) {
        $scope.error = error;
      });
}]);

Update

I finally found the documentation. It is a bit lengthy but considered essential to understand AngularJS 1.x. I recommend to read the document from top to bottom :)

PSWai
  • 1,198
  • 13
  • 32
  • No. That's not it. As I have mentioned, console response is as expected. So, no problem with the array assignment. – Aravind Dec 14 '15 at 07:11
  • @Aravind your data is alright. The problem is that you cannot assign the array to `$scope.resultset` directly as it will change the reference of that array. You need to use `angular.copy` in this case to preserve its reference. (I'm still digging the docs...) – PSWai Dec 14 '15 at 07:18
  • I have tried your solution. Still, nothing in the view. – Aravind Dec 14 '15 at 07:21
  • 1
    @Aravind it's working in this [plunker](http://plnkr.co/edit/hv3Gd1uezdLiGqREhnRz?p=preview). – PSWai Dec 14 '15 at 07:29
  • Hey, thanks for the plunker. It is working, it was a scoping issue, not an issue with the code. Your plunker helped me resolve the issue. – Aravind Dec 14 '15 at 07:45
  • @Aravind you are welcome. I have added the documentation, have a look at it :) – PSWai Dec 14 '15 at 08:04
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97827/discussion-between-park-soon-wai-and-aravind). – PSWai Dec 14 '15 at 08:07
0

Use your assignments or actions in scope function or private function. So this will help you to call the method only when you need and you can reuse the same method.

Note: Make sure you are getting the data in the array result.

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $scope.GetData =function(){
       $http.get('http://localhost:3000/testdata').then(function(data) {
          $scope.resultset = data.data.resultset;
          console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
    }

    $scope.init=function(){
        $scope.GetData();
    }
}]);

HTML:

<div class="wrapper-md" ng-init="init()" ng-controller="testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>
Jeeva J
  • 3,173
  • 10
  • 38
  • 85
  • `ngInit` should not be used this way. See the warning in its [documentation](https://docs.angularjs.org/api/ng/directive/ngInit) – PSWai Dec 14 '15 at 07:20
  • I agree with @ParkSoonWai and it did not work anyway. – Aravind Dec 14 '15 at 07:27
  • @ParkSoonWai Without using init, i can call the method. So it can call getData and will get the data. But sometime script will be loaded two times. So there will be a unnecessary two times call will be occurred. I've seen their comments. Do we need to use ng-init only for ng-repeat as alias property??? – Jeeva J Dec 14 '15 at 08:24
  • http://stackoverflow.com/questions/14523679/can-you-pass-parameters-to-an-angularjs-controller-on-creation/14531643#14531643 – Jeeva J Dec 14 '15 at 08:24
  • @JeevaJsb yes the usage of `ngInit` needs to be limited. The [answer](http://stackoverflow.com/questions/14523679/can-you-pass-parameters-to-an-angularjs-controller-on-creation/14531643#14531643) you have linked is a bit old, so the problem might not have surfaced that time. You have mentioned scripts being loaded multiple times, can you elaborate on it? Most of the time, a controller will only be initialized once per view. If you have some data that only needs to be fetched once per session, then it should be managed differently (e.g. root state of UI-Router). – PSWai Dec 14 '15 at 08:32
  • Great. @ParkSoonWai, I don't understand the problem from their command. I understand only the ng-init usage. What is the problem of using ng-init? if you don't mind, can you describe it here. – Jeeva J Dec 14 '15 at 09:39
  • 1
    @JeevaJsb technically `ngInit` is good to make initialisation calls. The problem is the controller logic is now located in template. The idea of "template initialises controller" does not sound that right. By controllers initialising themselves, the flow of logic feels better. Also, when it comes to testing, `ngInit` makes controller harder to test. You end up creating mock templates for controller tests which are unnecessary in the first place. – PSWai Dec 14 '15 at 11:41