# List from JSON does not appear

**URL:** <https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790>\
**Category:** ionic-v3\
**Created:** [January 10, 2018, 8:50am UTC](https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790 "2018-01-10T08:50:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tikorps](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@Tikorps](https://forum.ionicframework.com/u/Tikorps)\
**Post date:** [January 10, 2018, 8:50am UTC](https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790/1 "2018-01-10T08:50:26Z")

</div>

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/](http://www.arjunsk.com/html5/how-to-build-html5-app-using-ionic-cordova-part-4/) . But the list does not appear 😞

Here the code concerned :

sylvoe.html :

```auto
  <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 :

```auto
.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 :

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

```

list\_product.php :

```auto
<?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 :

```auto
{"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 😅

Thanks

---

<div class="post-metadata">

**Author:** ![anna\_liebt](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@anna\_liebt](https://forum.ionicframework.com/u/anna_liebt)\
**Post date:** [January 10, 2018, 10:03am UTC](https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790/2 "2018-01-10T10:03:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tikorps](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@Tikorps](https://forum.ionicframework.com/u/Tikorps)\
**Post date:** [January 10, 2018, 1:14pm UTC](https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790/3 "2018-01-10T13:14:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:55pm UTC](https://forum.ionicframework.com/t/list-from-json-does-not-appear/117790/4 "2021-07-19T21:55:57Z")

</div>