I’m having some trouble when using ng-repeat.
At first, I get a JSON object from database (read.php). And convert it into a javascript array object
var as = JSON.parse(data);
$scope.datadata = as;
I can get response $scope.datadata in console finely, but get nothing in browser. So I used a test array $scope.Picture_set, and it correctly showed up in browser. What can I do to my code to show the database items through ng-repeat?
read.php
<?php
require 'lib.php';
$object = new CRUD();
$picturetb = $object->Read();
if (count($picturetb) > 0) {
$arr = [];
foreach ($picturetb as $key=>$picture) {
$arr[] = array('key' => $key, 'name' => $picture['Picture_Name']);
}
}
echo json_encode($arr);
?>
html
<body>
<div ng-app="mainApp" ng-controller="drawbackController" class="container-fluid">
<div class="sidenav">
<table>
<thead>
<tr>
<th>No. </th>
<th>PictureName</th>
</tr>
</thead>
<tbody>
<!-- fail -->
<tr ng-repeat="d in datadata">
<!-- success -->
<!-- <tr ng-repeat="d in Picture_set"> -->
<td> {{ d.key }} </td>
<td><a> {{ d.name }} </a></td>
</tr>
</tbody>
</table>
<br>
<div class="addPicture" id="addPicture"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="JS.js"></script>
</div>
</body>
JS.js
var mainApp = angular.module("mainApp", []);
mainApp.controller('drawbackController', function ($scope) {
$scope.datadata =[];
// READ records
$scope.readRecords = function () {
$.get("ajax/read.php", {}, function (data, status) {
console.log(data);
var as = JSON.parse(data);
$scope.datadata = as;
console.log($scope.Picture_set);
console.log($scope.datadata);
$(".addPicture").html($scope.datadata);
});
}
$scope.readRecords();
// a test array
$scope.Picture_set = [
{ 'name': 'picture1' },
{ 'name': 'picture2' },
{ 'name': 'picture3' },
{ 'name': 'picture4' },
{ 'name': 'picture5' }
];
});
