html 5 sse unable to pass data to angular data

Question

html 5 sse unable to pass data to angular data

I have been trying to pass my sse data in the angular's data but it just won't display. Here is how I tried:

(my view)

<body ng-app>
  <div ng:controller="Main">
    <ul>
      <li ng:repeat="item in items">
        name:{{item.name}},age:{{item.age}}
      </li>
    </ul>
  </div>
</body>

(angular script)

var source = new EventSource('/feedcontain/test');

function Main($scope) {

  $scope.items = [];

  source.addEventListener('right', function(e) {
     $scope.$apply(function() {
      $scope.items.push(e.data);
     });
    },
  false);

 }

(/feedcontain/test)

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

echo "data: [{name:'john', age:23}, {name:'Mary', age:28}, {name:'Sean', age:28}] \n\n";

I wanted to display name:john, age:23 but it returns empty. I am trying to create something after I change the data or add then it will push to angularjs. Any idea? Thanks a lot.

angularjs
server-sent-events

Answer 1

If the event is ever happening, you end with an name:,age: result. All you should do then is to concat instead of pushing, as you're receiving an array.

$scope.items = $scope.items.concat(e.data);

Keep in mind that the $scope.items reference will change, what will not break Angular, but might breake any other references to it. If you need it to not change, use a for to push each element.