Best approach for refreshing and updating JSON data

[Andy Keller]

I have a pretty simple page that displays a list of objects with attributes. Think of it as a page of people with information (age, address, etc) about each person. I'd like to refresh this data and am happy to poll at regular intervals. The set of objects generally stays the same but the data may change.

The data is retrieved using a query service that returns a JSON array.

The problem I'm having is that if I just simply replace the entire JSON array, the entire page redraws (and doing it every second makes it blink). I've noticed that if I just update values deeply within each JSON object, leaving as much of the JSON intact, values update without blinking.

I'm in the process of writing a function to update a JSON object with new data (including new properties and values and removing ones that no longer exist) and using that instead of updating the JSON array reference, but I'm wondering if there isn't a better approach. My thought is that this will keep most of the references intact and minimize the number of changes that angular needs to make.

It doesn't seem like what I'm doing is that unusual, but a few hours of searching hasn't led anywhere. Thoughts?

[Andy Keller]

I sort of answered my own question, but I'm still eager to hear feedback from people who are more familiar with angular.

In my $timeout, I changed the following code:

            $timeout(function() {

                $scope.list = MyService.query();

            }, REFRESH_MILLIS);

to: 

            $timeout(function() {

                var update = MyService.query(function() {

                    $scope.list = update;

                });

            }, REFRESH_MILLIS);

and now I get updates without blinking. I'd love to understand more about the implementation of angular data binding, the promise returned by query(), etc. that explains what I'm seeing. I just started playing with angular yesterday so I haven't read much of the source.

[Pawel Kozlowski]

Hi!

Are you using the $resource service (seems so looking at your example
but just to be sure...).

If so the key to the answer is more in understanding how the $resource
works. The full answer is here:
http://stackoverflow.com/a/11966512/1418796
but in short any call to the $resource's query() method will replace
the result array with an empty one.
AngularJS will pick up and render this empty array (reflectively
wiping out all the results).
Then, upon new data arrival the empty array will get filled in an the
screen redrawn.

So in your first code example the array is empty (and the screen
"blank") during the whole HTTP request duration.
The flickering is linked to the empty array displayed for the "long time".

In your second example the content of the array is only replaced upon
data arrival. In this case an empty array is never rendered.
The only flickering you could see in this case would be linked to
elements moving, data change etc.

For the record, more on AngularJS data binding here:
http://stackoverflow.com/a/9693933/1418796

Hope this helps,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
>
>




--
Question? Send a fiddle (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/)
or a plunk (http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Andy Keller]

Thanks Pawel, that all makes a lot of sense. And thank for the links.

Yes I am using the $resource service. I was a bit suspicious about the sychronous-looking version of get(), but I figured it would just wait to update the bindings when the data was eventually returned. I was testing against localhost and mistook the blinking for browser rendering when it was actually fast (but non-zero) http requests.

Thanks again,

Andy