I am creating a hybrid android app using wordpress json api, ionic and angularjs. I am stuck at just one thing : I am unable to list the posts in a particular category.I got the list of categories but unable to pass some parameters. Here’s the code
controller.js
var app = angular.module('tsApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
home: {
templateUrl: 'index.html',
controller: 'TSController'
}
}
})
.state('category', {
url: '/category/:slug',
params: {
category: null //stores everything of catergory: slug, name etc.
},
views: {
category: {
templateUrl: 'category.html',
controller: 'CatsPostsCtrl'
}
}
});
$urlRouterProvider.otherwise('/');
})
// Home Controller
app.controller('TSController', function($scope, $http) {
$scope.categories = [];
$http.jsonp('http://localhost/khaliddev/azkarserv/api/get_category_index?callback=JSON_CALLBACK')
.success(function (data1) {
//console.log(data1);
$scope.categories = data1.categories; // response data
//console.log( $scope.categories);
}).error(function (data1) {
//console.log("BLOG failed");
});
});
// Cat Controller
app.controller('CatsPostsCtrl', function($scope, $http, $stateParams) {
console.log($stateParams);
// You can change this url to experiment with other endpoints
//http://localhost/khaliddev/azkarserv/api/?json=get_category_posts&slug=azkar-for-morning&status=publish
var postsApi = 'http://localhost/khaliddev/azkarserv/api/?json=get_category_posts&slug=' + $stateParams.slug + '&status=publish=JSON_CALLBACK';
$scope.category = $stateParams.category.name;
// This should go in a service so we can reuse it
$http.jsonp( postsApi, {cache:true} ).
success(function(data, status, headers, config) {
$scope.posts = data;
console.log( data );
}).
error(function(data, status, headers, config) {
console.log( 'Post load error.' );
});
});
The TSController
display all categories but CatsPostsCtrl
should display all posts in category which it doesn’t. its show me in consle (Error 404), Any help is appreciated. Thanks!
index.html :
<div class="page-content">
<nav class="dashboard-menu">
<div class="row text-center" >
<div class="col-33" ng-repeat="cat in categories">
<a href="category/{{cat.slug}}" class="menu-link">
<span class="icon-folder-plus"></span>
<span>{{cat.title}}</span>
</a>
</div>
</div>
</nav>
</div>
i think you have an error here, maybe you forgot “&callback=”
Do you know that when you use JSONP your json should be wrapped ?
wikipedia JSONP
I had the same problem once, the URL was good, the preview of chrome was showing me the correct JSON but the status was 404. When i wrapped the json around angular.callbacks._0() it worked
If you have a back-end service, I would advice you to simply use “$http.get” or “$http.post”