CRUD operations using ngResource - what am I doing wrong?

ionic-v1
1

Hi, Really grateful to anyone who can help I am struggling a little with the set up of basic CRUD operations with REST end points I have created on a php (joomla) backend (using the selfget jbackend extension, if anyone wants to know how to do this).

The backend seems to be working fine - postman returns JSON data as:

{
"status": "ok",
"total": 524,
"requests": [
    {
        "id": "3744",
        "itemtitle": "Apple iPhone 6, Silver, 16 GB (Unlocked)",
        "deliverydestination": "Capital Federal, Argentina",
        "updated": "2015-03-07 03:11:00",
        "status": "Collecting Bids",
        "item_image": "http://ecx.images-amazon.com/images/I/41cVv-L8yOL.jpg"
    },
    {
        "id": "3457",
        "itemtitle": "Audio-Technica ATH-M50 Professional Studio Monitor Headphones",
        "deliverydestination": "Buenos Aires, Argentina",
        "updated": "2015-03-07 02:59:14",
        "status": "Collecting Bids",
        "item_image": "http://ecx.images-amazon.com/images/I/41JFc3ohbNL.jpg"
    },
    {
        "id": "3663",
        "itemtitle": "Blendtec Total Blender, WildSide Jar - Black (Refurbished)",
        "deliverydestination": "Buenos Aires, Argentina",
        "updated": "2015-03-07 02:59:12",
        "status": "Collecting Bids",
        "item_image": "http://ecx.images-amazon.com/images/I/41zhGrnukxL.jpg"
    } ...etc

I have used the tabs starter project and I have included the resource.js in index.html

<script src="lib/ionic/js/angular/angular-resource.min.js"></script>

then adapted files as follows. services.js:

angular.module('starter.services', ['ngResource']).

factory('Request', function($resource) {
  return $resource('http://site.local/index.php?option=com_jbackend&view=request&action=get&module=helloworld&resource=items&lang=en:id'); // Note the full endpoint address
}).

factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460'
  }, {
    id: 2,
    name: 'Andrew Jostlin',
    lastText: 'Did you get the ice cream?',
    face: 'https://pbs.twimg.com/profile_images/491274378181488640/Tti0fFVJ.jpeg'
  }, {
    id: 3,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg'
  }, {
    id: 4,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/491995398135767040/ie2Z_V6e.jpeg'
  }];

  return {
    all: function() {
      return chats;
    },
    remove: function(chat) {
      chats.splice(chats.indexOf(chat), 1);
    },
    get: function(chatId) {
      for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  };
});

controllers.js:

    angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})

.controller('ChatsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
})

.controller('RequestsCtrl',function($scope, Request) {
  var request = Request.get({ id: $scope.id }, function() {
    console.log(request);
  }); // get() returns a single request
 
  var requests = Request.query(function() {
    console.log(requests);
  }); //query() returns all the requests
 
  $scope.request = new Request(); //You can instantiate resource class
 
  $scope.request.data = 'some data';
 
  Request.save($scope.request, function() {
    //data saved. do something here.
  }); //saves an request. Assuming $scope.request is the Request object  
});

and I created a new tab-requests.html and add a tab icon for it to the bottom bar.

<ion-view view-title="Requests">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="request in requests" type="item-text-wrap" href="#/tab/requests/{{request.id}}">
        <img ng-src="{{request.item_image}}">
        <h2>{{request.itemtitle}}</h2>
        <p>{{request.deliverydestination}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

console is logging the result as retrieved ok:

e {status: "ok", total: 524, requests: Array[524], $promise: Promise, $resolved: true…}

But nothing is showing. There are also a couple of errors in console:

ionic.bundle.js:19532 Error: [ng:areq] Argument 'ContentController' is not a function, got undefined

and

ionic.bundle.js:19532 Error: [$resource:badcfg] query

Grateful for a sense of where I am going wrong. Thanks!

2

the default behavior for ngResource when doing a get/query is that the results are an array… your results are not, that is the cause of this error I believe

ionic.bundle.js:19532 Error: [$resource:badcfg] query

As for the controller error, there is some code missing here is the question I believe?

Here is a demo I have done using ngResource http://codepen.io/aaronksaunders/pen/PwePVx

Here is a demo using both ngResource and $http - http://codepen.io/aaronksaunders/pen/gbWgQe?editors=101

3

Interesting - thanks for taking the time to look at this. what makes you say it isn’t returning an array? requests is an array:

 requests: Array[524],
4

because you stated that postman was return more than an array…
{status: "ok", total: 524, requests: Array[524], $promise: Promise, $resolved: true…}