Issue binding Angular ng-repeat to WebSQL/SQLLite

Question

in a Cordova app I have been attempting to bind angular mark-up like this:

<table class="table table-striped table-responsive">
                            <thead>
                                <tr>
                                    <th>Rotation</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>DOB</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in dtPatients track by item.fldRotation">
                                    <td>{{item.fldRotation}}</td>
                                    <td>{{item.fldID}}</td>
                                    <td>{{item.fldTitle + " " + item.fldForename + " " + item.fldSurname}}</td>
                                    <td>{{item.fldDOB | date:'dd/MMM-yy'}}</td>
                                </tr>
                            </tbody>
                        </table>

To a simple WebSQL transaction in a controller like this:

tx.executeSql("Select * from [tblPatients];"
                        , []
                        , function (tx, results) {
                            if (results.rows.length == 0) {
                                $scope.dtPatients = null;
                                $scope.$apply();
                            }
                            else {
                                // We have records so we create an array of the results
                                $scope.dtPatients = results.rows;
                                $scope.$apply();
                                debugger;
                            }
                        }
                        , function (tx, err) {
                            console_log("Error retrieving patients.");
                            $scope.dtPatients = null;
                            logdberror(err.code, err.message);
                            errorsource = -1;
                            ShowError('PatientsController1 load patients', err.code.toString + " " + err.message);
                            $scope.$apply();
                        }
                    );

This produces an error and the only way round it is to use code like that shown here to convert the rows to an array. I notice the error the author documented in the link talked about but I am not sure that is the error I am getting. I have also tried changing the ng-repeat from that shown above back to what I had from the beginning of

ng-repeat="item in dtPatients"

Either way I keep getting the same error. Surely it is not necessary to convert the SQL Resultset to an array before binding?

Here's the error being given:

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":17,"oldVal":15}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":19,"oldVal":17}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":21,"oldVal":19}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":23,"oldVal":21}],[{"msg":"fn: function (c,d){var e=a(c,d);return b(e,c,d)}","newVal":25,"oldVal":23}]] at Error (native) at localhost:4400/scripts/angular.min.js:6:417 at n.$get.n.$digest (localhost:4400/scripts/angular.min.js:124:185) at n.$get.n.$apply (localhost:4400/scripts/angular.min.js:126:293)

Thanks in advance for any help / advice.

maybe this will help you understand your error http://railsguides.net/fix-angular-digest-iteration-errors-with-memoization/ — Tanase Butcaru, May 25 '15 at 12:23

score 3 · Accepted Answer · answered May 28 '15 at 06:50

Well a few more days of research and I found the answer so I thought I would pop back and post it in case anybody else wondered how to bind Angular to a SQLite / WebSQL resultset.

In the above question I had a call back function for when the results were returned asynchronously:

else {
    // We have records so we create an array of the results
    $scope.dtPatients = results.rows;
    $scope.$apply();
    debugger;
}

This appeared to be triggering the indefinite loop that the error referred to. How or why I have no idea and perhaps somebody with better Angular experience can answer that. However the solution I found was not to manually build a string array like the link I referred to above did but instead change the code to do it in one move like this:

else {
    // We have records so we create an array of the results
    $scope.dtPatients = JSON.parse(JSON.stringify(results.rows));
    $scope.$apply();
    debugger;
}

Basically "string" it then convert it back to a JSON object. I wish I knew why you can't just bind to a SQLite resultset but for now this is the next best fix / work around I could get and for all I know this is the correct way to do it anyway.

You can also use `return angular.extend({}, results.rows);` – sidonaldson May 04 '16 at 10:22 — sidonaldson, May 04 '16 at 10:22

Issue binding Angular ng-repeat to WebSQL/SQLLite

1 Answers1