I'm trying to write an simple CRUD operation to show posts list in table in my laravel aplication. I connect laravel with angular by using service $http. The problem is that data are not being displayed in table I see only empty rows.
Below I show my laravel controller function:
public function index(){
$posts = DB::table('posts')->join('categories','posts.category_id','=','categories.id')->
join('users','posts.user_id','=','users.id')
->select('posts.id','posts.topic','categories.category_name','posts.created_at','users.name')->limit(3)->get();
return response()->json($posts,200);
}
Http Request in web.php file:
Route::get('api/posts','postsApiController@index');
My angular controller code with $http service:
var app = angular.module('app', ['ui.bootstrap','ngSanitize','ngAnimate']).constant('API_URL', 'http://localhost:8000/api/');
app.controller('postsController', function($scope, $http, API_URL) {
$http({
method: 'GET',
url: API_URL + "posts",
}).then(function successCallback(response){
$scope.posts = response;
}, function errorCallback(response){
});
});
In Google chrome Developer Tools, in overlap network I see response:
[{"id":9,"topic":"Odkrycie gwiazdy z ezgoplanet\u0105","category_name":"popularnonaukowe","created_at":"2017-04-16 17:38:59","name":"szarik"},{"id":18,"topic":"Post ze zdj\u0119ciem","category_name":"popularnonaukowe","created_at":"2017-05-07 15:30:52","name":"szarik"},{"id":21,"topic":"Testowy post","category_name":"popularnonaukowe","created_at":"2017-05-26 17:40:07","name":"szarik"}]
Here is part of my blade.php template where I'd like to display Received data:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Topic</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="post in posts">
<td>@{{ post.topic}}</td>
</tr>
</tbody>
</table>
</div>
I see only empty rows :
<tbody>
<!-- ngRepeat: post in posts --><tr ng-repeat="post in posts" class="ng-scope">
<td class="ng-binding"></td>
</tr><!-- end ngRepeat: post in posts --><tr ng-repeat="post in posts" class="ng-scope">
<td class="ng-binding"></td>
</tr><!-- end ngRepeat: post in posts --><tr ng-repeat="post in posts" class="ng-scope">
<td class="ng-binding"></td>
</tr><!-- end ngRepeat: post in posts --><tr ng-repeat="post in posts" class="ng-scope">
<td class="ng-binding"></td>
</tr><!-- end ngRepeat: post in posts --><tr ng-repeat="post in posts" class="ng-scope">
<td class="ng-binding"></td>
</tr><!-- end ngRepeat: post in posts -->
</tbody>
I completely don't know why it dosen't work. Could someone help me how Could I properly receive this data? I would be very greateful. Best regards
$scope.posts = response;to$scope.posts = response.data;and test it