Daftar dan Belajar Sekarang!

ng-repeat tidak menampilkan data

foto joisandresky
4 Kontribusi 0 Coto
2 tahun yang lalu
permisi mohon bantuan nya nih , saya terbilang baru dalam AngularJS nah saya sedang belajar untuk menggunakan $http untuk operasi CRUD dengan PHP dan MySQL . saya mendapatkan problem ketika ingin menampilkan data nya padahal koneksi ke database tidak ada masalah. bahkan saya console log repson dari $http.get pun berhasil mengambil data nya . tetapi tetap tidak tampil di dalam table menggunakan ng-repeat. Berikut kode untuk index.html nya :
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Sistem Karyawan</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-controller="controllerKaryawan" ng-init="displayData()">
	<div class="container">
		<h2 class="page-header text-center">Daftar Karyawan</h2>
		
		<!-- Kolom tambah data dan pencarian karyawan -->
		<div class="row">
			<div class="col-sm-4">
				<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Tambah Karyawan</button>
			</div>
			<div class="col-sm-8">
				<input type="text" ng-model="cari" placeholder="Cari karyawan..." class="form-control">
			</div>
		</div>
		<!-- End -->
		<!-- Table data karyawan -->
		<table class="table table-responsive">
			<thead>
				<tr>
					<th>ID</th>
					<th>Nama</th>
					<th>Alamat</th>
					<th>Jabatan</th>
					<th>Gaji</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="data in karyawan">
					<td>{{data.id}}</td>
					<td>{{data.name}}</td>
					<td>{{data.address}}</td>
					<td>{{data.position}}</td>
					<td>{{data.salary |  currency}}</td>
					<td><button class="btn btn-success btn-sm" ng-click="updateData(data.id)"><i class="glyphicon glyphicon-pencil"></i></button> | <button class="btn btn-danger btn-sm" ng-click="deleteData(data.id)"><i class="glyphicon glyphicon-remove"></i></button></td>
					</tr>
			</tbody>
		</table>
		<!-- end table -->

		<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">Tambah Data Karyawan</h4>
		      </div>
		      <div class="modal-body">
		        <form ng-submit="tambahData()" name="myForm" novalidate>
		        	<div class="form-group">
		        		<label for="name">Nama</label>
		        		<input type="text" name="name" ng-model="name" class="form-control">
		        	</div>
		        	<div class="form-group">
		        		<label for="alamat">Alamat</label>
		        		<textarea name="alamat" ng-model="address" cols="30" class="form-control"></textarea>
		        	</div>
		        	<div class="form-group">
		        		<label for="position">Jabatan</label>
		        		<input type="text" name="position" ng-model="position" class="form-control">
		        	</div>
		        	<div class="form-group">
		        		<label for="salary">Gaji</label>
		        		<input type="text" name="salary" ng-model="salary" class="form-control">
		        	</div>
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" ng-click="tambahData()" data-dismiss="modal">Save Data</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>


	<script src="js/angular.min.js"></script>
	<script src="app.js"></script>
	<script src="js/jquery-2.2.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>
dan ini query untuk retrieve data (data.php) :
<?php 
include('koneksi.php');

$query = "SELECT id, name, address, position, salary FROM karyawan";
$data = mysqli_query($conn, $query);

while($row = mysqli_fetch_assoc($data)){
	$output[] = $row;
}
echo json_encode($output);

 ?>
dan berikut adalah kode untuk app.js :
var myApp = angular.module('myApp', []);


myApp.controller('controllerKaryawan', function($scope, $http){
	$scope.displayData = function(){
		$http.get("db/data.php").then(function(response){
			$scope.karyawan = response;
			console.log(response);
		})
	}
})
mohon bantuan nya untuk dikoreksi apa yang salah :)

Tag: javascript angular php

✔ Forum ini sudah terjawab


Jawaban
foto CodenameJR
276 Kontribusi 104 Coto
2 tahun yang lalu
coba $scope.displayData nya jangan ditaro di init.. di jalanin di jsnya aja.. trus, $scope.karyawan di init dulu variablenya sebagai array.
var myApp = angular.module('myApp', []);


myApp.controller('controllerKaryawan', function($scope, $http){
        $scope.karyawan = [];
	$scope.displayData = function(){
		$http.get("db/data.php").then(function(response){
			$scope.karyawan = response;
                        console.log($scope.karyawan);
		})
	}
        $scope.displayData();
})
SS Hasilnya Kesini
answered icon
foto CodenameJR
276 Kontribusi 104 Coto
2 tahun yang lalu
coba didebug pas get data dari dbnya mas, datanya dapet apa engga .. sebelum echo json_encode :
print_r($output);
die();

foto joisandresky
4 Kontribusi 0 Coto
2 tahun yang lalu
data nya berhasil dapet kok bro angular nya pun juga udh berhasi get data dri server pas saya console log . cuman data tsb gak tampil di table nya .

foto rachmatsasongko
410 Kontribusi 422 Coto
2 tahun yang lalu
Kalo di console log $scope.karyawan outputnya gimana gan? jangan console log ajax response nya. Kalo liat htmlnya sih mestinya udah bener.

foto CodenameJR
276 Kontribusi 104 Coto
2 tahun yang lalu
coba $scope.displayData nya jangan ditaro di init.. di jalanin di jsnya aja.. trus, $scope.karyawan di init dulu variablenya sebagai array.
var myApp = angular.module('myApp', []);


myApp.controller('controllerKaryawan', function($scope, $http){
        $scope.karyawan = [];
	$scope.displayData = function(){
		$http.get("db/data.php").then(function(response){
			$scope.karyawan = response;
                        console.log($scope.karyawan);
		})
	}
        $scope.displayData();
})
SS Hasilnya Kesini

foto joisandresky
4 Kontribusi 0 Coto
2 tahun yang lalu
Okeh mas @CodenameJR udh solve trnyata benar harus di initalize dlu $scope.karyawan sebagai array .

foto CodenameJR
276 Kontribusi 104 Coto
2 tahun yang lalu
sip, semangat!

foto Mochammad
7 Kontribusi 0 Coto
1 tahun yang lalu
kalo nampilih 1 data gimana kang? mau saya taro di <h1>...</h1>


Login untuk diksusi di forum sekolah koding