How to open category to get list of post [ionic & angularjs]

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

Read More
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>

Related posts

1 comment

  1. i think you have an error here, maybe you forgot “&callback=”

    &status=publish=JSON_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”

Comments are closed.