List from JSON does not appear

Ionic Framework ionic-v3
1

Hello,

I have a php file that echo a JSON objet list and i try to put this items in a ion-list following this tutorial : http://www.arjunsk.com/html5/how-to-build-html5-app-using-ionic-cordova-part-4/ . But the list does not appear :disappointed:

Here the code concerned :

sylvoe.html :

  <ion-list ng-repeat="item in menu_items">

      // Element de liste
      <ion-item class="item-thumbnail-left" >
        <img ng-src="{{'img/'+ item.p_image_id}}" ng-click="showProductInfo(item.p_id, item.p_description, item.p_image_id, item.p_name, item.p_price)">
        <p style="position:absolute;right:10px;">
          <a ng-click="addToCart(item.p_id, item.p_image_id, item.p_name, item.p_price)" class "button button-balanced button-clear icon ion-ios-cart"> </a>
        </p>
        <h2 ng-click="showProductInfo(item.p_id, item.p_description, item.p_image_id, item.p_name, item.p_price)" > {{item.p_name}} </h2>
        <p  ng-click="showProductInfo(item.p_id, item.p_description, item.p_image_id, item.p_name, item.p_price)" > {{item.p_price}}€ </p>
      </ion-item>

    </ion-list>

controllers.js :

.controller('sylvoeCtrl', ['$scope', '$http', function ($scope, $http) {

  //$scope.$on----> onload event
	$scope.$on('$stateChangeSuccess', function () {

		str="localhost/list_product.php";

		$http.get(str).    // sends request for the file
		success(           // if seccusfull response is recieved
			function (response){  // if response is not null
				$scope.menu_items = response.records;   // set menu_items array with items from response
		  }
		);
	}); // end of '$scope.$on'
}])

routes.js :

    .state('tabsController.sylvoe', {
    url: '/page2',
    views: {
      'tab1': {
        templateUrl: 'templates/sylvoe.html',
        controller: 'sylvoeCtrl'
      }
    }
  })

list_product.php :

<?php
// Used to output JSON data
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
//used to establish connection
$conn = new mysqli("localhost", "xxx", "xxx, "xxx");
// query to retrieve the products
$query="SELECT * FROM xxx where products_commandable=1 ";
//generates the result
$result = $conn->query($query);
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
  if ($outp != "") {$outp .= ",";}
  $outp .= '{"p_id":"'  . $rs["products_id"] . '",';
  $outp .= '"p_name":"'   . $rs["products_model"]        . '",';
  $outp .= '"p_description":"'   . "ceci est une description"        . '",';
  $outp .= '"p_image_id":"'   . $rs["products_image"]        . '",';
  $outp .= '"p_price":"'. $rs["products_prix_achat_sylvoe"]     . '"}';
}
//$ret = json_encode($ret);
$outp ='{"records":['.$outp.']}';
$conn->close();
//outputs the content
echo $outp;
?>

When i go to list_product.php in browser it display JSON in this format :

{"records":[{"p_id":"1","p_name":"NAME1","p_description":"ceci est une description","p_image_id":"NAME1.jpg","p_price":"1.0000"},{"p_id":"2","p_name":"NAME2","p_description":"ceci est une description","p_image_id":"NAME2.jpg","p_price":"2.0000"}]}

Then when i go to my page all the content load correctly exept that the list does not appear. If anyone can help me :sweat_smile:

Thanks

2

Hello,

maybe holds your menu_items one or more objects called records, this holds an array with one or more unnamed objects. Each unnamed object holds properties like p_id.

But, if I see it correct, in your ng-repeat is item the object valled record and this has no property p_id

Best regards, anna-liebt

3

Thanks dear anna-liebt
But i finally found that the problem was that $scope.$on('$stateChangeSuccess', function () { never get triggered and as soon as i removed this function, it worked well