Help please improve the script.

There is a json file. I load it and I need to determine exactly when the data came. Here is a sample code. His weak point is that verification:

if($scope.news) { console.log('OK'); } else { console.log('NOTOK'); }; 

displays incorrect information ("NOTOK") to the console while data is successfully received.

To solve the problem, I tried to wrap this code in $ timeout (in the same example, the corresponding lines are commented out).

But this is a bad practice because I set the interval to 1000ms, and when I receive a json file (for example, from a server) a delay can occur and this interval will be exceeded.

On the other hand, if the json file is received from the server in less than 1000ms, the user will look too much at a screen where nothing happens

In general, please help rewrite the code humanly.

I give the full code:

 var app = angular.module('plunker', []); app.controller('MainCtrl', ['$rootScope', '$scope', '$timeout', '$http', function($rootScope, $scope, $timeout, $http) { $scope.getNews = function() { $http.get('news.json') .then(function successCallback(resp){ console.log('success', resp); console.log('data', resp.data); console.log('status', resp.status); console.log('statusText', resp.statusText); $scope.news = resp.data.values; }, function errorCallback(resp) { console.log('error', resp); console.log('data', resp.data); console.log('status', resp.status); console.log('statusText', resp.statusText); }); }; $scope.getNews(); //$timeout(function() { if($scope.news) { console.log('OK'); } else { console.log('NOTOK'); }; //}, 1000); }]); 

Reported as a duplicate by Grundy , Bald , tutankhamun , HamSter , post_zeew participants on Oct 26 '16 at 0:17 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • You yourself wrote successCallback. Here it is - the moment when the request returned an answer. - etki
  • This is yes. But I would like the program to consist of loosely coupled pieces. In particular, in order to be able to call up all the main functions in turn, and not one of the other (so that the logic does not get confused when the project becomes more complex). so in js do not write? .. - cyklop77
  • You either call the following function at the end of the request or not. You can pass it with an argument if you want to reduce connectivity. - etki

2 answers 2

I recommend before $http.get(... write return so that you can add handlers for success and non-success with a chain from then() after $scope.getNews() . It turns out instead of

 $scope.getNews(); if($scope.news) { console.log('OK'); } else { console.log('NOTOK'); }; 

you can write

 $scope.getNews().then(function() { console.log('OK'); }, function() { console.log('NOTOK'); }); 

    The first callback of Promise .then is this moment. But here you do not need to define it. The bottom line is that $news may or may not be - this is important for the template. So make a template in which there will be ng-repeat by $news , and if $news not defined or empty - the corresponding text. And if you want to filter the answer before displaying, then .then(filterFn).then(otherFilterFn) is a great place for this purpose, but the Angular filter can be better.

    • I did not understand what you want to say in your answer. How do I understand the question is only the first sentence? - Grundy
    • what purpose are you interested in? Everything concerns the question. - 11111000000
    • with the one that is not currently responding to the question - Grundy
    • I still believe that answers. The attention of the questioner is reasonably directed towards, architecturally determined for Angular, the point of contact between the model and the view. Declarative binding in the presentation layer is characteristic and generally accepted for this framework. Next, we consider the most obvious task, for which the author is going to “determine the moment of receiving data” - and it is noted that, rather than trying to imperatively control asynchronous processes, it is better to use pure functions and filters. Further, again, in the case of Angular, it is canonical - | filter | filter in the template. - 11111000000