title: iOnic app - use $http.delete to delete object from local JSON file
body: <p>I'm trying to build my first hybrid-app by using iOnic. iOnic makes use of AngularJS. But both are totally new for me :)</p>
  
  <p>So far I'm pretty happy with the results I made because I can find a lot of stuff if I'm stuck, but now I'm lost.</p>
  
  <p>I'm trying to delete a favorite object I have saved in a local JSON file by clicking the remove button that I have placed behind every favorite item. </p>
  
  <p>HTML template where the favorite items are listed by ng-repeat:</p>
  
  <pre><code>&lt;ion-view view-title="My Favorites"&gt;
  &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item ng-repeat="favo in favos" class="row"&gt;
          &lt;i class="col icon ion-{{favo.gender}}"&gt;&lt;/i&gt;
          &lt;a href="#/app/myFavos/{{favo.id}}" class="button-clear col col-80"&gt;
              {{favo.name}}
          &lt;/a&gt;
          &lt;a class="button button-icon icon ion-trash-b col" ng-click="removeFavo({{favo}})"&gt;
          &lt;/a&gt;
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller.js file:</p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('FavoslistCtrl', function($scope,  myFavos) {
  
      myFavos.getFavos(function (data) {
          console.log(data);
          $scope.favos = data;
      });
  
      $scope.removeFavo = function(data) {
  
          $scope.favos = myFavos.deleteFavo(data);
  
      };
  
  });
  </code></pre>
  
  <p>Service.js file:</p>
  
  <pre><code>angular.module('starter.services', [])
  
  .factory('myFavos', function($ionicLoading, $http) {
  
  
    // Might use a resource here that returns a JSON array
    return {
  
      getFavos: function(callback) {
        $ionicLoading.show();
        $http.get('data/favos.json').success(function (data) {
          console.log("http GET success my favorites");
  
          console.log("return myFavos", data);
          $ionicLoading.hide();
          return callback(data);
  
        }).error(function (err) {
          $scope.error = 'Could not load favorites';
        });
      },
  
      deleteFavo: function(favo) {
  $ionicLoading.show();
        $http.delete('data/favos/' + favo + '.json').success(function (data) {
  $ionicLoading.hide();
          return callback(data);
        });
      }
    }
  
  });
  </code></pre>
  
  <p>favos.json:</p>
  
  <pre><code>[
      {
          "id":1,"name":"Adam","description": "Lorem Ipsum", "gender": "male"
      },
      {
          "id":2,"name":"Eva","description": "Lorem Ipsum", "gender": "female"
      },
      {
          "id":3,"name":"alex","description": "Lorem Ipsum", "gender": "male"
      },
      {
          "id":4,"name":"adam","description": "Lorem Ipsum", "gender": "male"
      },
      {
          "id":5,"name":"max","description": "Lorem Ipsum", "gender": "male"
      }
  ]
  </code></pre>
  
  <p>I have been trying it with the $http.delete function in the factory I made called 'myFavos' but I can't figure out how to delete the right object, with the right id.  </p>
  
  <p>If someone could help that would be awesome!</p>
  
  <p><strong>UPDATE 08-12-2015 10:37am</strong></p>
  
  <p>I'm a step closer now, thanks to the reply of Gajotres on my post on the <a href="http://forum.ionicframework.com/t/http-delete-local-json-file/30294" rel="nofollow">iOnic forum</a>
  The only error I get now in the console is:</p>
  
  <blockquote>
    <p>DELETE <a href="http://localhost:8100/data/favos/[object%20object].json" rel="nofollow">http://localhost:8100/data/favos/[object%20object].json</a> 404(Not Found)</p>
  </blockquote>
  
  <p>I updated the code to the current state.</p>