iOnic app - use $http.delete to delete object from local JSON file

Question

I'm trying to build my first hybrid-app by using iOnic. iOnic makes use of AngularJS. But both are totally new for me :)

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.

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.

HTML template where the favorite items are listed by ng-repeat:

<ion-view view-title="My Favorites">
<ion-content>
    <ion-list>
      <ion-item ng-repeat="favo in favos" class="row">
        <i class="col icon ion-{{favo.gender}}"></i>
        <a href="#/app/myFavos/{{favo.id}}" class="button-clear col col-80">
            {{favo.name}}
        </a>
        <a class="button button-icon icon ion-trash-b col" ng-click="removeFavo({{favo}})">
        </a>
      </ion-item>
    </ion-list>
</ion-content>

Controller.js file:

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);

    };

});

Service.js file:

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);
      });
    }
  }

});

favos.json:

[
    {
        "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"
    }
]

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.

If someone could help that would be awesome!

UPDATE 08-12-2015 10:37am

I'm a step closer now, thanks to the reply of Gajotres on my post on the iOnic forum The only error I get now in the console is:

DELETE http://localhost:8100/data/favos/[object%20object].json 404(Not Found)

I updated the code to the current state.

You only want to delete it locally or you also want to delete it on the server ? — GuillaumeP
– GuillaumeP, Commented Jul 31, 2015 at 14:09

Aaron Saunders · Accepted Answer · 2015-08-01 05:30:59Z

0

$scope.removeFavo = function(data) {
    myFavos.deleteFavo(favo); // <=== shouldn't this be data?
}

Are you using the correct variable??

answered Aug 1, 2015 at 5:30

Aaron Saunders

33.4k5 gold badges64 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aproskam Over a year ago

Your suggestion was good, there was a problem with the variable and the properties I used. I changed the code and I'm one step closer, now I get a 404 from the http.delete function.

Aaron Saunders Over a year ago

my guess is that you should be passing in an object id, not the whole object

Collectives™ on Stack Overflow

iOnic app - use $http.delete to delete object from local JSON file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related