0

I'm creating an Ionic app with the WP Rest API. I have returned the post data but I'm furthermore looking to get the category name. The JSON data for the posts only contains the category ID. I am trying to access the category ID and reference it in my controller to get the categories data in order to get the category name via the ID.

My controller looks like this:
svampeApp.controller('PostCtrl', function ($scope, svampeApi, $stateParams) {

//Individual Post Controller
console.log("$stateParams", $stateParams);

$scope.posts = [];
$scope.categoryId = [];

$scope.id = $stateParams.id;

svampeApi.getPostData($scope.id).then(function (succ) {
  $scope.posts = succ;
  $scope.categoryId = succ.categories;
}, function(err) {
  console.log('Error: ', err);
});

console.log("Category Object", $scope.categoryId);

//Getting the category ID to display the category name
$scope.categories = [];    

svampeApi.getCategoryData($scope.categoryId).then(function (succ) {
  $scope.categories = succ;
}, function(err) {
  console.log('Error: ', err);
});

});

With this line I should get the category ID as it is stored in the Post object:

$scope.categoryId = succ.categories;

However, when I make my second api call for the category name using the ID, I get an error.

svampeApi.getCategoryData($scope.categoryId).then(function (succ) {
  $scope.categories = succ;
}, function(err) {
  console.log('Error: ', err);
});

How do I save the category ID of the individual post in the scope so I can access it in my second api call? The categories include the name of the category, which I want to access in my view via:

<p>
  {{categories.name}}
</p>

The category object is empty:

Category Object []

I hope you can help me.

kristofferandreasen
  • 847
  • 2
  • 12
  • 24
  • Please clarify: Are you getting the category name from the server or is it embedded in the JSON from the first server call (that includes category ID)? I don't see and REST/Ajax calls. NOTE: Your server calls are asynchronous so you cannot call to get the category name from server until the category id server call is guaranteed complete. This means you need to chain your promises. – MoMo Nov 06 '16 at 22:22
  • The first call to the 'svampeApi.getPostData($scope.id)' contains the category ID but not the name. That is why I'm trying to pass the ID in the second call as 'svampeApi.getCategoryData($scope.categoryId)'. The getCategoryData has a field called name that contains the name. I want to extract the ID from the first call to use in the second call. I hope it makes sense. – kristofferandreasen Nov 06 '16 at 22:28
  • Is the second call to get category name to the server? Again, if so, you *have* to call it inside the 'succ' function of the first call. Otherwise, it is called prematurely *before* the first call to get id returns from server. If the second call to get cat name is *not* to the server and is synchronous, why so you have a '.then()' which implies a request fro an async promise return? – MoMo Nov 06 '16 at 22:35
  • The categories data is nested as such in the JSON data: "categories": [ 3 ], – kristofferandreasen Nov 06 '16 at 22:35
  • Then why are you using '.then(...)'? Is the function implementation creating a promise? – MoMo Nov 06 '16 at 22:38
  • Thanks for clarifying. The second call is to the server as well. I will try to move it inside the 'succ' function. – kristofferandreasen Nov 06 '16 at 22:38
  • If it works please 'accept' my answer. Many thanks. – MoMo Nov 06 '16 at 22:39

1 Answers1

1

Please clarify: Are you getting the category name from the server or is it embedded in the JSON from the first server call (that includes category ID)? I don't see any REST/Ajax calls. NOTE: Your server calls are asynchronous so you cannot call to get the category name from server until the category id server call is guaranteed complete. This means you need to chain your promises.

MoMo
  • 1,836
  • 1
  • 21
  • 38