Update DOM automatically with dynamically acquired external JSON data from websockets, in AngularJS

Question

I have a websocket-based application that has data 'pushed' to the client-side, in the form of a JSON object.

I need the DOM to be automatically updated, with the JSON that I retrieve over the websocket protocol, via AngularJS. I cannot find a simple way to do this, and a change to the websocket retrieval code is not the way to go about it.

This post, although for Socket.io users (which I am not using), involves using a rather large piece of JavaScript that seems too cumbersome to use, while this post suggests attaching the variable to the $window object - which isn't the best way to go about things.

Assuming two things:

I have a piece of JSON which I need to automatically update the DOM, that is external to AngularJS
I am trying to avoid a large code requirement to achieve this

How can I achieve what I require?

I'm playing around with my jsfiddle for updating the DOM (tables) when the JSON updates, however the JSON is within the Angular code. My JSON will be outside it.

The post on Socket.io should give you enough hint. You need to wrap the interaction with websocket into a angularjs service and use that service where ever you want. — Chandermani
– Chandermani, Commented Oct 24, 2013 at 15:57
@Chandermani As I said that was very complex just to auto-update something from an external variable. I have found another solution using $apply - have you come across this before? — Jimbo
– Jimbo, Commented Oct 24, 2013 at 15:58
Well it is doing the same thing $rootScope.$apply. Why do you think this is complex. What it is trying to create is provide a pub\sub api with methods on and emit. You may end up doing the same :) — Chandermani
– Chandermani, Commented Oct 24, 2013 at 16:00
Pub/Sub was a bugger to get right with this websockets, no way I'm doing that client-side :P I'm going to post an answer that I found, if you would care to comment on that and let me know what you think? — Jimbo
– Jimbo, Commented Oct 24, 2013 at 16:02

Jimbo · Accepted Answer · 2013-10-24 16:11:27Z

Okay, so it's not as easy to find out how to do this as expected, but here's the general gist of one solution that I have found - any other solutions are much appreciated.

You need to:

Define a default set of JSON values using ng-init. These will be what appear before any data is to be passed through to the Angular scope. This can actually be an empty JSON object, so it's almost no extra coding.
Within your separate, non-angular code, you need to retrieve the scope of the object you attached the ng-init directive to, then use the $apply method to update the JSON in the scope.

Here's what I'm talking about. Assume I have a list of tags, and I want to add a new tag from an external source.

<ul id="tags" ng-init="tags = [{name: 'somejson'}]">
    <li ng-repeat="tag in tags">
        {{tag.name}}
    </li>
</ul>

Notice we've given the ul element an id field so that we can reference this later on in our external-to-angular JavaScript. The code is simple. It'll loop through the tags and display "somejson" in an li.

Now for our external function to update this JSON.

setTimeout(function() { 
    var scope = angular.element($("#tags")).scope();

    scope.$apply(function() {
        scope.tags.push({name: 'ANOTHER LI HERE PLEASE'});
    });
}, 5000);

I've wrapped the code in a setTimeout() call so it'll take 5 seconds to update and you'll actually be able to see the DOM change. Firstly, you get the scope of the #tags element, then you use $apply to apply a custom function to any variables within the scope.

In this case, I'm adding a custom LI. However, with my own code, I'll literally shove the JSON retrieved from the websockets into this .push() method when data is retrieved from the server, instead of within a setTimeout.

Here's a JSFiddle.

Collectives™ on Stack Overflow

Update DOM automatically with dynamically acquired external JSON data from websockets, in AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related