API query in AngularJS returns nothing, Laravel 5.1 RESTful API, Angular JS (1.5 / 1.4.9) Front End -
wow, i'm @ loss , have been fitting days. use ...
problem : when query api in angular javascript don't data in response. know api working nothing attached $scope.data sending view, other $scope variables work. have attempted fix issue using angular $http resource , restangular angjs service link. here details of problem, , suggestions.
current config : i'm developing site uses laravel 5.1 restful api. located on local vagrant instance of homestead url >> http://api.platspl.at:8000/
i know works because if go >> api.platspl.at:8000/tracks, (abbreviated):
[{"id":1,"name":"track 1 name","slug":"track-1-name",...,"updated_at":"2016-01-31 15:30:56"},{"id":2,...,"updated_at":"2016-01-31 15:30:56"},{"id":3,...,"updated_at":"2016-01-31 15:30:56"}] here code controller:
public function index() { // using model //$data = track::where('published', 1)->get(); //$data->tojson(); //return $data; // using db $data = db::table('tracks')->where('published', 1)->get(); return response()->json($data); } as can see attempted fix angular js issue using both laravel model , database query, neither fixed anything.
i using angular js front-end , there problem lies. when go platspl.at:8000/ receive angular app response, defined routes.php file in laravel. here routes code:
route::get('/', function() { return view::make('app.index'); }); the view using located in /resources/views/app/ , all necessary angularjs files located in public directory of laravel install. here of code view, followed 2 angular files referenced in view.
view :
<html lang="en" ng-app="platsplatapp"> <head>...</head> <body ng-controller="appctrl"> <div class="page-header"> <h1>platspl.at - {{ user }}</h1> </div> <p>1 + 2 = {{ 1 + 2 }}</p> <div ng-repeat="track in tracks"> <h3>{{ track.name }}</h3> <p>{{ track.description }}</p> </div> </body> <script type="text/javascript" src="<?= asset('app/bower_components/angular/angular.js') ?>"></script> ... <script type="text/javascript" src="<?= asset('app/bower_components/restangular/src/restangular.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/app.js') ?>"></script> <script type="text/javascript" src="<?= asset('app/scripts/controllers/appctrl.js') ?>"></script> app.js :
angular.module('platsplatapp', ['restangular']); appctrl.js :
angular.module('platsplatapp', []) .controller('appctrl', [ '$scope', function($scope, restangular) { // set user $scope.user = 'user name'; //create restangular object var data = restangular.allurl('tracks', 'http://api.platspl.at:8000'); // make query , return promise. data.getlist().then(function(response) { $scope.tracks = response; }); //$scope.tracks = restangular.allurl('tracks', 'http://api.platspl.at:8000').getlist().$object; //$scope.tracks = restangular.allurl('alltracks', 'http://api.platspl.at:8000/tracks').getlist().$object; //var data = restangular.allurl('tracks', 'http://api.platspl.at:8000/tracks').getlist(); //var data = restangular.oneurl('tracks', 'http://api.platspl.at:8000/tracks/by/1').get(); //$scope.tracks = data; //$scope.tracks = [{'name': 'error', 'description': 'error'}]; }]); // .controller('appctrl', [ '$scope', '$http', // function ($scope, $http) { // $scope.user = 'user name'; // $http({ // method: 'get', // url: 'http://api.platspl.at:8000/tracks', // }).then(function(result) { // $scope.tracks = result.data; // }, function (error) { // $scope.tracks = [ { 'name': 'error', 'description': 'error' } ]; // }) // } //]); all js coded attempted use commented out. again suggestions!
these kind of problems hard debug.
- make sure request going out restful api using tools fiddler. check getting response.
- if requests not going out try using plain old
$http.get('url') - if getting response check response.status , response.data. here docs.
you api working if can navigate url , json.
Comments
Post a Comment