How to call data on Ionic with API

Question

I edited my codes

 .factory('ProductsService',['$ionicSideMenuDelegate', '$http', 'ApiEndpoint', '$ionicTabsDelegate', '$ionicSlideBoxDelegate', '$stateParams', 'AuthService', function($ionicSideMenuDelegate, $http, ApiEndpoint, $ionicTabsDelegate, $ionicSlideBoxDelegate, $stateParams, AuthService){
         var products = [];
         var prod = [];

         return {
           GetProducts: function(){
            return $http.get(ApiEndpoint.url + '/products', {}).then(function(response){
              products = response.data.products;
              return response;
            });
          },
          GetProduct: function(productId){
                angular.forEach(products, function(product, key){
                  $scope.prod = {}; //ERROR: $scope is not defined
                  if(product.id == productId){
                    prod = product;
                    return product;
               }
               })
              return prod;
         }
         }
       }])

..after I click the item that error appears..And the page doesnt show the details must shown..

Are you looking for a service? There are many previous posts on this subject: http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers http://stackoverflow.com/questions/22408790/angularjs-passing-data-between-pages — BatteryAcid, Sep 29 '15 at 19:50
Your GetProducts method needs to return a promise. Currently it doesn't do anything. Change `$http.get` to `return $http.get` — Andrew McGivery, Oct 01 '15 at 14:02
hi @Andrew McGivery I Edited my question can you help me??. thanks — RH34Serenity, Oct 02 '15 at 03:40
Did you read my last comment? You still aren't returning a promise. Perhaps try reading this article to understand how promises work in the context of Ionic. http://mcgivery.com/promise-based-architecture-in-an-ionic-app/ — Andrew McGivery, Oct 05 '15 at 15:25
Hi @Andrew McGivery thanks, I have read your last comment and try it but still getting the same problem No output..I-edited my code please check it..thanks.. — RH34Serenity, Oct 06 '15 at 10:05
Did you check your dev tools to see if you are getting any errors? Are you getting a response from your API? — Andrew McGivery, Oct 07 '15 at 03:00
Hi Andrew please check my code whats missing??.. an error ing $scope is says its not define..thanks.. — RH34Serenity, Oct 07 '15 at 16:38

score 2 · Answer 1 · edited May 23 '17 at 12:23

I am not sure if I got your question.

Usally every View has its own Controller. So in your case one controller for the menu.html and for the productpage. Of course you can also use the same controller for both views. If you want to use one controller for both views the controller can provide the data for both views.

If you want a controller for each view you have to share to data between the controllers. For sharing data between different controllers you can find a lot of help: - Stackoverflow share data between controllers - Thinkster using services to share data between controllers

In both solutions you had to call your api in this services. For that you should understand the angularjs concept of $q and promises: Angularjs Documentation of $q

If could specifiy which data you want to call from which page to another, I can improve this answer.

EDIT:

Based on your comment I can add the following suggestion. In your products.html you want to display the details of a choosen product. Thats roughly said a master-detail-pattern. You can take a look at this: Master-Detail-Pattern.

You will have to change your state-config and add a state for the product-details. Something like that (you will have to change the code):

.state('productDetails', {
    url: "/product/:id",
    templateUrl: 'templates/product.html',
    controller: 'yourCtrl'
});

In your controller you can get the given :id over the state-params:

 var productId= $stateParams.id;

To achive that it works you also have to edit your menu.html. For every product you need a link which looks like:

<a href="#/product/{{product.id}}">{{product.name}}</a>

This has to be wrapped in your ng-repeat. But that is all discribed on the given page.

Of course there are also other possibilities to do what you want.

Hi @RH34Serenity, could you add the code of your states. Somewhere you should have the state configuration like that: .state('productDetails', { url: "/product/:id", templateUrl: 'templates/product.html', controller: 'yourCtrl' }); — JSNorth, Oct 01 '15 at 10:39
You are messing some things up. - The http get with the url productpage/:id wont to anything. You should still call your api here - The problem ist that this line: var productId = $stateParams.id; $scope.product = ProductsService.GetProduct(productId); is only called once when the controller is instantiated. You could now write a second controller for that detailState and wire that in the states together. — JSNorth, Oct 01 '15 at 11:53

How to call data on Ionic with API

1 Answers1