Getting value from complex JSON array in angular js

Question

I have JSON array look like this

{
    "-K3OFVYXVUiT-oYXFmgX": {
        "id": 4658,
        "username": "shamon"
    },
    "-K3OFZAt9Qyy9v6z-XYQ": {
        "id": 9891,
        "username": "manu"
    },
    "-K3OFafyCi6g9UhdR2mA": {
        "id": 7219,
        "username": "hari"
    },
    "-K3OGYGGry3pU8_Qkjg_": {
        "id": 8028,
        "username": "shamonsha"
    }
}

I want to display the usernames in a <ul> list

<ul>
    <li ng-repeat="user in userlist">{{user.username}}</li>
<ul>

But I will get empty result

UPDATE

Here is my full code,its a response form firebase url,the problem is i will get console.log($scope.userlist) but it will not updated in html list

.controller('chatCtrl',function($scope){
    messagesRef= new Firebase(chaturl+'userlist');
        messagesRef.on('value', function (snapshot) {
                  var  msg= snapshot.val();
               $scope.userlist=JSON.stringify(msg);
               console.log($scope.userlist);
            });
});

Related: How to use ng-repeat for dictionaries in AngularJs? — Jonathan Lonowski
– Jonathan Lonowski, Commented Nov 18, 2015 at 6:45
user will likely be assigned each key ("-K3OFVYXVUiT-oYXFmgX", etc.) rather than each value in userlist. You can verify this by outputting {{typeof user}} (the key is a string, the value is an object). — Jonathan Lonowski
– Jonathan Lonowski, Commented Nov 18, 2015 at 6:48

Satpal · Accepted Answer · 2015-11-18 07:28:20Z

1

You can use (key, value) in expression

<ul>
    <li ng-repeat="(key, value) in userlist">
        {{value.username}}
    </li>
<ul>

DEMO

EDIT: Need to use $scope.$apply(fn) so that changes is updated.

.controller('chatCtrl',function($scope){
    messagesRef= new Firebase(chaturl+'userlist');
    messagesRef.on('value', function (snapshot) {
              var  msg= snapshot.val();
              $scope.$apply(function () { 
                   $scope.userlist=JSON.stringify(msg); 
              });
        });
});

edited Nov 18, 2015 at 7:28

answered Nov 18, 2015 at 6:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

2 Comments

Satpal Over a year ago

@BlessanKurien, May be you need $scope.$apply(function () { $scope.userlist=JSON.stringify(msg); });

Blessan Kurien Over a year ago

Where can i place it? inside messageRef.on

Collectives™ on Stack Overflow

Getting value from complex JSON array in angular js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related