Empty result set

[vivendi]

How can I handle empty result sets? I'm using $resource to load my data with an Ajax call. When data is returned then it all works fine. But when I get no data, then the table keeps showing "Loading...".

I have HTML that looks like this:

<table datatable="ng" dt-options="dtOptions" class="row-border hover">
    <thead>
        <tr>
            <th>date (ISO)</th>
            <th>name</th>
            <th>email</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr dt-rows="" ng-repeat="user in users">
            <td>{{ user.date }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>actions</td>
        </tr>
    </tbody>
</table>

In my controller I have this:

// Init empty var
$scope.users = [];
//$scope.users = {}; Doesn't work either

I want to somehow init the table with an empty variable. But when I use a variable like that then it keeps saying "Loading...".

Is there a way to solve this problem?

[l-lin]

Good catch 👍 It's a bug I didn't consider.
I'm on it.

[l-lin]

Mmh I can't really find a solution within the module.
But, you can solve this by adding the ng-if directive, for example like this:

<table datatable="ng" dt-options="dtOptions" class="row-border hover" ng-if="users.length > 0">
    <thead>
        <tr>
            <th>date (ISO)</th>
            <th>name</th>
            <th>email</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr dt-rows="" ng-repeat="user in users">
            <td>{{ user.date }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>actions</td>
        </tr>
    </tbody>
</table>
<p ng-show="users.length == 0">No result</p>

[vivendi]

Yeah, that's what I'm doing now (the ng-if stuff). But I'd rather show the table with no rows. So the user can still see the table headers. Seems more user friendly to me.

But for now I'll stick with the ng-if solution.

[l-lin]

Code works if we give the array directly to the scope, but not working when fetching the data from promises 😢

[l-lin]

Fixed at last! 😄