Display json data with ng-controller and ng-repeat

1

Hello every one, I have a problem to display data that i get from a php page encoded with json.

Here’s the code of each page :

GetReservations.php :

<?php 
    session_start();
    header("Access-Control-Allow-Origin: *");
    require_once("includes/myPDO/myPDO.include.php");
    require_once("includes/phpass/PasswordHash.php");
    $user=json_decode(file_get_contents('php://input'));  // Accesseur sur le formulaire de connexion

    $req=myPDO::getInstance()->prepare("SELECT * 
                                        FROM wp_postmeta 
                                        WHERE post_id IN (SELECT post_id 
                                                          FROM wp_postmeta 
                                                          WHERE meta_value IN (SELECT ID 
                                                                               FROM wp_posts 
                                                                               WHERE post_type = 'product'
                                                                               AND post_author = :id
                                                                               AND post_status = 'publish'))");

    $id=$_SESSION['userid'];
    $req->execute(array(':id'=>$id));
    $u=$req->fetchAll(PDO::FETCH_COLUMN,3);
    $reservations = array();
    $keys =  array('produitName','lieuSortie','dateSortie','position','invites','heureSortie');
            for($i=0;$i<6;$i++){
                if($i==4){
                    $u[$i]=substr($u[$i],2,1)+1;
                }
                $reservation[$keys[$i]]=$u[$i];
            }
            $reservations[] = $reservation;
        
        $data = json_encode($reservations);
    
        print $data;

?>

my PHP page returns :

 [{"produitName":"267","lieuSortie":"","dateSortie":"23\/04\/2015","position":"a:3:{s:3:\"lat\";s:0:\"
\";s:3:\"lng\";s:0:\"\";s:6:\"adress\";s:0:\"\";}","invites":3,"heureSortie":"10:00"}]

GetReservations function :

function GetReservations($scope, $http) {
    // this is where the JSON from api.php is consumed
    $http.get('data/getReservations.php').
        success(function(data) {
            // here the data from the api is assigned to a variable named user
            $scope.res = {};
            $scope.res.posts = data;
        });
}

And the reservations.html page :

<div style="margin-top:60px;height:auto;" ng-controller="GetReservations">
              <div class="list card" ng-repeat="item in res.posts">
                  <div class="item item-avatar">
                    <img src="img/avatar.png">
                    <h2>Nouvelle réservation !</h2>
                    <p>{{item.invites}} personnes</p>
                  </div>

                  <div style="background-image:url(img/cover.png);padding-top:34px;padding-bottom: 34px; color: white;/*font-size: 2em;*/right: 0;left:0;text-align:center;">
                   
                    <div class="infos-res">
                      <i class="icon ion-calendar"> </i> {{item.dateSortie}}
                      <i class="icon ion-clock"> </i> {{item.heureSortie}}

                    </div>
                  </div>

                  
                    <div class="button-bar">
                      <button class="button button-balanced" ng-click="accepter()">Accepter</button>
                      <button class="button button-assertive" ng-click="confirmRefus()">Refuser</button>
                      
                    </div>
                  

                </div>
        </div>

The problem is that I get nothing showed on my page

2

Is the data returned from your PHP page a String or an Object?

console.log(typeof data);

If it is a string try:

$scope.res.posts = angular.fromJson(data);