-1

I am new to realtime application and its bothering for a while how to render the data coming from websocket services like pusher using the angularjs ngRepeat directive.. below are the response from the api and the snippets code i have.

Client Side.

$scope.exam_results = [{}];
    var client = new Pusher('some_key');
    var pusher = $pusher(client);
    var my_channel = pusher.subscribe('some_channel');
    my_channel.bind('some_event', function(data) {
        $scope.some_var = data;
        console.log($scope.some_var);
    });

Server Side

.....
LaravelPusher::trigger($some_channel, 'some_event',  $some_var);

By the way im using laravel and angularjs.

Need little help here guys.. thank you ^_^

Api Response

[
  {
    "id": 1,
    "subject_id": 1,
    "student_id": 1,
    "correct": 0,
    "incorrect": 30,
    "created_at": "2016-02-17 17:47:36",
    "updated_at": "-0001-11-30 00:00:00",
    "exam_taken": 1,
    "students": {
      "id": 1,
      "firstname": "Mary Rose",
      "lastname": "Labrador",
      "middlename": "Neneng",
      "birthdate": "2016-02-10",
      "email": "maryrose@dummy.com",
      "username": "maryrose",
      "gender": "Female",
      "password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
      "guardianname": "Unnamed",
      "guardiancontact": "+6309083561578",
      "personalcontact": "+6309083561578",
      "department_id": 1,
      "taken_exam": 1,
      "created_at": "2016-02-16 00:00:00",
      "updated_at": "2016-02-17 17:47:58"
    },
    "subjects": {
      "id": 1,
      "subjectname": "Algorithm",
      "slug": "algorithm",
      "time": "10:00:00",
      "schedule": "MWF",
      "teacher_id": 1,
      "created_at": "2016-02-12 09:28:27",
      "updated_at": "2016-02-12 09:28:27"
    }
  },
  {
    "id": 2,
    "subject_id": 1,
    "student_id": 4,
    "correct": 0,
    "incorrect": 30,
    "created_at": "2016-02-17 18:54:11",
    "updated_at": "-0001-11-30 00:00:00",
    "exam_taken": 1,
    "students": {
      "id": 4,
      "firstname": "Joan Phylis",
      "lastname": "Rogano",
      "middlename": "Latoja",
      "birthdate": "2016-02-14",
      "email": "joangwapa@dummy.com",
      "username": "joan143",
      "gender": "Female",
      "password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
      "guardianname": "Unnamed",
      "guardiancontact": "+639083561578",
      "personalcontact": "+639083561578",
      "department_id": 1,
      "taken_exam": 1,
      "created_at": "2016-02-16 00:00:00",
      "updated_at": "2016-02-17 18:57:43"
    },
    "subjects": {
      "id": 1,
      "subjectname": "Algorithm",
      "slug": "algorithm",
      "time": "10:00:00",
      "schedule": "MWF",
      "teacher_id": 1,
      "created_at": "2016-02-12 09:28:27",
      "updated_at": "2016-02-12 09:28:27"
    }
  }
]

HTML

<tr ng-reapeat="result in exam_results track by $index">
                    <td>
                        <span class="text-success">@{{result.students.lastname}}, 
                            @{{result.students.firstname}} @{{result.students.middlename}}
                        </span>
                    </td>
                    <td><a href="javascript:void(0);" class="fa fa-eye pull-right"> View</a></td>
                </tr>
Michael Mendoza
  • 91
  • 1
  • 2
  • 10

2 Answers2

1

As $scope.exam_results is an array, why not just use Array.concat() to add the new data to it? Angular's digest cycle would then render it:

$scope.exam_results = [];

// your websocket code

my_channel.bind('some_event', function(data) {
    $scope.exam_results.concat(data);
    console.log($scope.exam_results);
});

Obviously, the data from the websocket needs to be the same format over time and also an array of objects. You would bind your ng-repeat to $scope.exam_results.

<ul>
   <li ng-repeat="result in exam_results track by $index">
       {{result.students.firstname}}
   </li>
</ul>
Johannes Jander
  • 4,974
  • 2
  • 31
  • 46
  • Yes, it's an array. I don't know what you are trying to render, though. Since it is just a PNG, it's not really easy to say if all data sets are the same. – Johannes Jander Feb 18 '16 at 10:35
  • `code` [ { "id": 1, "subject_id": 1, "student_id": 1, "correct": 0, "incorrect": 30, "created_at": "2016-02-17 17:47:36", "updated_at": "-0001-11-30 00:00:00", "exam_taken": 1, "students": { "id": 1, "firstname": "Mary Rose", "lastname": "Labrador", "middlename": "Neneng", "birthdate": "2016-02-10", }, – Michael Mendoza Feb 18 '16 at 10:39
  • its an empty array with your snippet, when i try to initialize the $scope.some_var into an empty array, but in array of object the log result to [Object] – Michael Mendoza Feb 18 '16 at 10:43
  • [Object] as an array of objects is exactly what is in your PNG. See my updated answer how to render this. – Johannes Jander Feb 18 '16 at 10:44
  • Also: please read http://stackoverflow.com/questions/12528403/how-to-integrate-angular-js-with-a-realtime-messaging-service-like-pusher-or-pub?rq=1 – Johannes Jander Feb 18 '16 at 10:45
  • is it neccesarry to nest the ngRepeat directive,? i normal ajax in angularjs you only have to access the nested property which is the students in this case? by the way i got empty result – Michael Mendoza Feb 18 '16 at 11:41
  • this the server side code by the way. $results = Semisterexaminationresult::with('students', 'subjects') ->where('subject_id', $subject->id) ->get(); – Michael Mendoza Feb 18 '16 at 11:43
  • The outer data structure is an array, so yes, you need nested repeats unless you know 100% this array has only one entry - judging by your PNG that's not the case. Please explain the data you expect from the websockets, is it a stream of outer data or students? Please copy more of that JSON and append it to your question. – Johannes Jander Feb 18 '16 at 12:00
  • OK, so students was not an array, that slipped my eye. So you can get rid of the double repeat, see my update. – Johannes Jander Feb 18 '16 at 12:21
  • Then set up a JSbin or something. I don't think you actually tried that code. – Johannes Jander Feb 18 '16 at 12:28
0

If your event data is consistently going to be an Array of Objects.

You can do something like this - 

$scope.exam_results = []; // Changed this to Array.
var client = new Pusher('some_key');
var pusher = $pusher(client);
var my_channel = pusher.subscribe('some_channel');
my_channel.bind('some_event', function(data) {
    $scope.exam_results.concat(data) // Concatinating Array to merge with existing Results.
});

Now you can have your view something like this - 

<div ng-repeat="result in exam_results">
 <!-- HTML to render Result -->
 <span>{{result.students.first_name}}</span>
</div>

Hope this helps.

Dwijen
  • 590
  • 4
  • 15