CODEWITHSUNDEEP
javascriptangularjs
Eugene Goldberg
Eugene Goldberg

Reputation: 15544

How to check if a model on the $scope is empty

As I'm writing my first single page Angular app, I'm facing with a challenge of populating, $scope.MyModel with duplicate data upon subsequent calls to the data service:

The first time the $scope.MyModel is empty and is populated by making a call to a data service.

This takes place in response to a menu "show ..." being selected. Subsequent to that, the user may select other menu items and look at other things, and then, return back to select the same "show..." menu item.

Once this menu item is selected again, it triggers another call to the data service, and $scope.MyModel is then appended with the duplicate set of data coming from this additional service call.

Obviously, in a single page app, the whole point is not to make any unnecessary service calls.

What is the standard way of checking and preventing such additional service calls, if a given model is already populated with data?

Upvotes: 2

Views: 3857

Answers (3)

Khanh TO
Khanh TO

Reputation: 48972

Obviously, in a single page app, the whole point is not to make any unnecessary service calls.

I don't think that this is mandatory, it should depend on requirements and what you want to do. In an application that is accessed by multiple users at the same time, this creates a better application by refreshing the view with latest data from server => reduce the likelihood of concurrency problems like viewing out of date data, updating out of date data which is usually done by applying a version to the data and resulting in an error from server when you try to update stale data (a row that has a version lower than the version on the server).

If you decide to check for empty and don't want to refresh with latest data. You could do it like we usually do with normal javascript. @Hasib Hasan Arnab's answer is an example of a solution.

If the expected value of $scope.MyModel is an array. You could try:

if (Array.isArray($scope.MyModel)){
}
else{
}

A polyfill for not supporting browsers:

if(!Array.isArray) {
  Array.isArray = function (vArg) {
    var isArray;

    isArray = vArg instanceof Array;

    return isArray;
  };
}

Quoted from Array.isArray.

Upvotes: 1

godfrzero
godfrzero

Reputation: 2270

Since you mentioned that the API call takes place in response to interaction with a menu, I'm assuming the returned data is an array, so correct me if I'm wrong.

There are two possibilities here though: The data returned by the API is dynamic and can change on subsequent calls, or the response data is identical for every call. Depending on which case you're dealing with, you can try one of the following:

Identical Data

$scope.MyModel = [];

// Later on, in response to user interaction
if( !$scope.MyModel.length ) {
  // We only make the API call if $scope.MyModel isn't already populated
}

Dynamic Data

// We want to replace the data in $scope.MyModel each time now
// So assuming your service parses the data to an array:

// In response to user interaction
SomeService.query(function(r) {
  $scope.MyModel = [].concat(r.MyData)
});

Upvotes: 2

Hasib Tarafder
Hasib Tarafder

Reputation: 5813

Just a if..else.. 

if ($scope.MyModel) {
    // items have value
} else {
    // items is still null
}

Upvotes: 2

Related Questions