0

I'm having some trouble when trying to populate a table with data. The index.php is the main page where i have the ng-view The app.js is my viewController where it gets json data (using service.php) from a database. And the dashboard.php is my main view where it should populate a table with the json array. However the json data is not passed to my view, although I can see the json array on the console. Here is a summary of my code. I'd really appreciate if anyone could help me on this one. Thanks!

index.php 

<html>
<head>
    <base href="http://localhost/levitSysv1/">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>
    <script src="LevitApp.js"></script>
</head>
<body ng-app="myApp">
    <a href="Dashboard">Dashboard</a>
    <a href="Orcamento">Orcamento</a>
    <div ng-view></div>
</body>
</html>

app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
        $routeProvider

        .when("/Orcamento", {
            templateUrl:"./views/orcamento.php"
            //controller:"customersCtrl"
        })
        .when("/Dashboard",{
            templateUrl:"./views/dashboard.php",
            controller:"viewController"
        });

        $locationProvider.html5Mode(true);
}]);

myApp.controller('viewController', function($scope, $http){
    $http.get("http://localhost/levitSysv1/service/index.php?r=list")
    .then(function (res) {
            console.log(res);
            $scope.lists = res.lists;

    },function (res) {
            /* Error loading data */
            window.alert("Erro app.js line 33");
            console.log(res);
    });
});

dashboard.php

<h2>View</h2>
<table class="table table-hover" ng-controller ="viewController">
<thead>
    <tr>
        <th>#</th>
        <th>Nome Etapa</th>
        <th>Responsavel</th>
    </tr>
</thead>
    <tbody> 
        <tr ng-repeat="list in lists">
            <td>{{list.idEtapa}}</td>
            <td>{{list.NomeEtapa}}</td>
            <td>{{list.SetorResponsavelEtapa}}</td>
        </tr>
</tbody>
</table>

services.php

//Connection to database etc
case "list":
            $getData = "select * from etapas";
            $qur = $connection->query($getData);
            while($r = mysqli_fetch_assoc($qur)){
                    $data[] = $r;
            }
            $msg['lists'] = $data;
 break;
$json = $msg;
@mysqli_close($connection);
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json');
//var_dump($json);
echo json_encode($json);

ob_flush();
Bhagwat Tupe
  • 1,905
  • 1
  • 13
  • 28
Alexandre Lima
  • 1
  • 1

2 Answers2

0

You have to tell Angular that something changed in your async callback I guess:

$scope.$apply(function () {
    $scope.lists = res.lists;
});
Paflow
  • 2,030
  • 3
  • 30
  • 50
  • Hi,thanks for your time to answer. I have made the change you suggested, however I receive the error: Error: [$rootScope:inprog] – Alexandre Lima Aug 07 '19 at 21:12
  • Appareantly i was wring and the $timeout-solution is the correct one. See here: https://stackoverflow.com/questions/12729122/angularjs-prevent-error-digest-already-in-progress-when-calling-scope-apply – Paflow Aug 09 '19 at 07:26
0

Once you get response from api, tell controller to update scope or give some timeout to update scope. As its async call, angular scope should know when to update scope, Try using $apply function of angular or give some timeout.

myApp.controller('viewController', function($scope, $http){
$http.get("http://localhost/levitSysv1/service/index.php?r=list")
.then(function (res) {
        console.log(res);
        $scope.$apply(function () {
          $scope.lists = res.lists;
});

},function (res) {
        /* Error loading data */
        window.alert("Erro app.js line 33");
        console.log(res);
});

});

Or you can give some timeout to reflect the changes and update scope. Inject $timeout as dependency injection.

$timeout({
  $scope.lists = res.lists;
}, 200);
Pankaj Chauhan
  • 346
  • 3
  • 8