AngularJS: get dynamic data from Array

Question

I have a node.js, socket.io and angular application, where I create a "user" object whenever somebody connects to the server and puts it into my "users" array. Now I want to have angular to take the users and dynamically update the page to show the array.

//users array contains all active user objects
var users =[];

//user object (example)
var exampleuser = {
    name: "Hans",
    clicks: 0,
    lang: "German"
}

//index.html angular scope for all active users
<table>
    <thead>
        <tr><th colspan="4">All online users</th></tr>
    </thead>
    <tbody>
       <tr ng-repeat="user in UserList">
          <td>{{$index + 1}}</td>
          <td><img src="./img/flags/{{user.lang}}.png" /></td>                     
          <td>{{user.name}}</td>
          <td>(clicks: {{user.clicks}} )</td>
       </tr>
    </tbody>
</table>

So how do I have to configure my Angular controller in order to get all users from the array "users" and put them in an angular $scope? Thanks

Beyers · Accepted Answer · 2014-03-31 11:40:41Z

1

You will have to wrap your users array and socket.io code that updates this array inside a angular service(s) and then inject this service into your controller. Inside your controller you can assign your array, e.g. $scope.userList = yourService.users;

The only gotcha would be that you will have to wrap your update of the service users array in $apply so that Angular knows about the change to the array. It would be as simple as:

... Inside your socket.io angular service
function updateArray(newUser){
  $rootScope.$apply(function() { users.push(newUser); };
};

answered Mar 31, 2014 at 11:40

Beyers

9,11847 silver badges59 bronze badges

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

5 Comments

Marc Over a year ago

hey Beyers, thanks for your comment, but I did not really get all of this. inside my userController I put $scope.userList = yourService.users; and where exactly do I create my service, also where my controller is? and in my index.js I will call "updateArray(newUser)? I dont get how everything will be connected.

Beyers Over a year ago

@Marc A service is one of the core components of Angular. I suggest you take a step back and go over the fundamental concepts of Angular again. I recommend to start with the tutorial docs.angularjs.org/tutorial and developer guide docs.angularjs.org/guide

Marc Over a year ago

I did the tutorial, but it is not using socket.io and node.js. so my only problem is how to add an object from my "server" to the angular controller, so that my index.html page can access this information. its already working with static input

Beyers Over a year ago

Well for socket.io you would still need a client component, to listen for updates from the server right? So that socket.io client code needs to sit inside a Angular service, and in the callback where you receive the server data you would call the updateArray function. This will cause Angular to be notified of the change of the array and in turn will update your controller array and view.

Marc Over a year ago

ok, but how do I call an angular controller-class (updateArray) outside of angular in my node.js/socket.io server? I dont have a ng-click button on my index.html, because I want to add a user directly to the array whenever a user connects, not with onclick.

Collectives™ on Stack Overflow

AngularJS: get dynamic data from Array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related