Ng-repeat and JSON file

ionic-v1
1

Hi!

I’m having some trouble using ng-repeat with my JSON array.
I’ve tried multiple things.

$scope.Users =  [{"UserName":"P1","Userpwd":"123456"},
    {"UserName":"P2","Userpwd":"123456"},
    {"UserName":"P3","Userpwd":"123456"},
    {"UserName":"P4","Userpwd":"123456"},
    {"UserName":"P5","Userpwd":"123456"},
    {"UserName":"P6","Userpwd":"123456"},
    {"UserName":"P7","Userpwd":"123456"},
    {"UserName":"P8","Userpwd":"123456"},
    {"UserName":"P9","Userpwd":"123456"}],

and this is my html page where i want to repeat the UserName and Userpwd of the users

  <div ng-contoller="ticketing2Ctrl">
    <ion-content padding="true" class="has-header">
      <div ng-repeat="(UserName, Userpwd) in Users">
          <ion-list id="ticketing2-list2">
            <ion-item class="item-divider " id="ticketing1-list-item-divider1">{{user.UserName}}</ion-item>
            <ion-item id="ticketing1-list-item7" ui-sref="info" class="  ">{{user.Userpwd}}</ion-item>
            <div class="spacer" style="width: 300px; height: 21px;"></div>
        </ion-list>
  </div>

This is my output

image
Screenshot_2016-06-22-09-38-50.png1080×1920 29.5 KB

How can i get it to display the usernames and passwords?

2

try:
<div ng-repeat="user in Users">
instead of
<div ng-repeat="(UserName, Userpwd) in Users">

3

Hey, First of all thanks for the reply!

If i change this, I get an error saying: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys. Repeater: user in Users, Duplicate key: string:e, Duplicate value: e

Any idea how to fix this?

4

so replace it with:
<div ng-repeat="user in Users track by $index">
I find it in the official doc: https://docs.angularjs.org/error/ngRepeat/dupes

5

Done that, still no success, if I do that, I get a lot of repeated items but they’re all empty

6

I don’t know what is the source of the problem neither If this is the best solution but I think you can resolve it by replacing:
{{user.UserName}} and {{user.Userpwd}}
with:
{{Users[$index].UserName}} and {{Users[$index].Userpwd}}

so the final code will be

<div ng-repeat="user in Users track by $index"">
          <ion-list id="ticketing2-list2">
            <ion-item class="item-divider " id="ticketing1-list-item-divider1">{{Users[$index].UserName}} </ion-item>
            <ion-item id="ticketing1-list-item7" ui-sref="info" class="  ">{{Users[$index].Userpwd}}</ion-item>
            <div class="spacer" style="width: 300px; height: 21px;"></div>
        </ion-list>
  </div>
7

Hello,
It’s like haytam said, you have to change the ng-repeat value [quote=“haytam, post:2, topic:55472, full:true”]
try:<div ng-repeat=“user in Users”>instead of <div ng-repeat="(UserName, Userpwd) in Users">
[/quote]

For the second part, I cannot reproduce your issue : http://play.ionic.io/app/f4f0dc773b61

8

Hi,

My JSON file is comes from a php file thats connected to a database. For that I use a service:

.service('UserService', function ($http, $q){
  var deferred = $q.defer();
  $http.get('http://192.168.0.110/Ticketing/JSONENCODE.php').then(function (data)
{
  deferred.resolve(data);
});

this.getUsers = function()
{
  return deferred.promise;
}
})

Controller:

.controller('ticketing2Ctrl',  function($scope, UserService)
{
  var promise = UserService.getUsers();
  promise.then(function (data)
  {

    $scope.Users = angular.toJson(data.data);
    console.log($scope.Users);
  })
})

and this is what I get in the console:

[{"UserName":"P1","Userpwd":"123456"},
    {"UserName":"P2","Userpwd":"123456"},
    {"UserName":"P3","Userpwd":"123456"},
    {"UserName":"P4","Userpwd":"123456"},
    {"UserName":"P5","Userpwd":"123456"},
    {"UserName":"P6","Userpwd":"123456"},
    {"UserName":"P7","Userpwd":"123456"},
    {"UserName":"P8","Userpwd":"123456"},
    {"UserName":"P9","Userpwd":"123456"}]
9

Hi,

It doesn’t care from where the value comes. If nothing is shown in your view maybe you have to notify the view.

$scope.$apply() after your $scope.Users = angular.toJson(data.data);

10

Doesn’t work either

any other ideas?

11

Try this : Ionic Framework - The Cross-Platform App Development Leader

12

Check out this once.

http://play.ionic.io/app/fafbc3d15c7a

Hope this will resolve your problem.

13

This works but how do I get the data from the php script inside the $scope.users?

14

Do you have an alert when you launch the app ? If not, then the list shown is the one from your php page.

15

Yes, i get an alert, it’s a popup saying “Alert { }”

in console:

SyntaxError: Unexpected token o
    at Object.parse (native)
    at file:///android_asset/www/js/controllers.js:63:27
    at processQueue (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27879:28)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27895:27
    at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:29158:28)
    at Scope.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:28969:31)
    at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:29263:24)
    at done (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23676:47)
    at completeRequest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23848:7)
    at XMLHttpRequest.requestLoaded (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:23789:9)ionic.bundle.js:25642 (anonymous function)
16

Solved It thanks to @rberthome
Controller:

.controller('ticketing2Ctrl',  function($scope, UserService, $q, $ionicLoading)
{


  $scope.Users =  [];

  $ionicLoading.show({
      template: 'Loading...'
    });

  var deferred = $q.defer();
  deferred.promise.then(function(){
    $ionicLoading.hide();
  });

  UserService.getUsers().then(function(data){
    $scope.Users = JSON.parse(JSON.stringify(data.data));
    deferred.resolve();
  }).catch(function(err){
    $scope.Users = [{"UserName":"ERROR","Userpwd":"Can't connect to server"}];
      deferred.resolve();
  });

})

Service:

.service('UserService', function ($http){
  this.getUsers = function()
  {
    return  $http.get('http://192.168.0.110/Ticketing/JSONENCODE.php');
  }
  })

HTML:

<div ng-contoller="ticketing2Ctrl">
    <ion-content padding="true" class="has-header">
      <div ng-repeat="user in Users">
          <ion-list id="ticketing2-list2">
            <ion-item class="item-divider " id="ticketing1-list-item-divider1">{{user.UserName}}</ion-item>
            <ion-item id="ticketing1-list-item7" ui-sref="info" class="  ">{{user.Userpwd}}</ion-item>
            <div class="spacer" style="width: 300px; height: 21px;"></div>
        </ion-list>
  </div>