Search code examples
angularjsionic-frameworkangularjs-scopeangularjs-ng-repeat

ng-repeat does not render array items from Jsonp Server


So here I go with my first question. I am trying to use ng-repeat to render data from the server, but it's not displaying anything. this is the code for my controller

.controller('ExampleController', function($scope, $http) {   
var url = "https://lari.jumpstart.ge/en/api/v1/commercial_banks?callback=JSON_CALLBACK";

       $http.jsonp(url)
            .success(function(data) {

                $scope.results =   data.results;
          })
            .error(function(data) {
              alert("ERROR");
            });


});

this is the ng-repeat in my view

<ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content >
          <ion-item ng-controller='ExampleController' ng-repeat='x in results'> 


         {{x.code}} 


</ion-item>
      </ion-content>
    </ion-pane>
  </body>
</html>

this is the array on the server

{  
   "valid":true,
   "results":[  
      {  
         "code":"BAGA",
         "name":"Bank Of Georgia",
         "currencies":[  
            "AED",
            "AMD",
            "AUD",
         ]
      },
      {  
         "code":"TBCB",
         "name":"TBC Bank",
         "currencies":[  
            "AED",
            "AUD",
            "AZN", 
         ]
      },

Solution

  • The erroneous code has the ng-controller directive on the same node as the ng-repeat directive.

    <!-- Replace THIS
    <ion-content >
         <ion-item ng-controller='ExampleController' ng-repeat='x in results'> 
             {{x.code}} 
         </ion-item>
    </ion-content>
    -->
    
    <!-- With THIS -->
    <ion-content ng-controller='ExampleController' >
         <ion-item ng-repeat='x in results'> 
             {{x.code}} 
         </ion-item>
    </ion-content>
    

    The ng-repeat directive needs to be on a child node from the ng-controller.