Angular $HTTP posting- dynamic URL and defining post

Question

I am trying to post a simple binary value (using $http) to a URL which si defined by a value in my HTML.

I have successfully got the "card.id" being passed through (can see it in console log)

                <td-card ng-repeat="card in cards"
                         on-destroy="cardDestroyed($index)"
                         on-swipe="cardSwiped($index)"
                         on-swipe-right="$parent.cardSwiped(card.id)"
                         on-swipe-left="$parent.cardSwiped(card.id)" >

The data I want to post needs to be to a URL which has the card.id in it.

How to I tell it what to post and how to trigger?

.controller('CardsCtrl', ['$scope', 'TDCardDelegate', 'cardsApi', '$http',
    function($scope, TDCardDelegate, cardsApi, $http) {
       console.log('CARDS CTRL');
        $scope.cards = [];

        $scope.onSwipeRight=function(product_id){console.log(product_id)}
        //Post for swipe right {'like':1, 'uid':21}

        $scope.onSwipeLeft=function(product_id){console.log(product_id)}
        //Post for swipe left {'like':0, 'uid':21}

             for(var i = 0; i < 7; i++) {
                 cardsApi.getApiData()
                     .then(function (result) {
                         $scope.cards.unshift(result.data);
                         $scope.product_id = result.data.product_id;
                     })
                     .catch(function (err) {
                         $log.error(err);
                     });
             }

             $scope.$watchCollection('cards', function (newVal, oldVal) {
                 if(newVal < oldVal) {
                     cardsApi.getApiData()
                         .then(function (result) {
                             $scope.cards.unshift(result.data);
                         })
                         .catch(function (err) {
                             console.log(err);
                         });
                 }
             });

             $scope.cardSwiped = function(card) {
         console.log('here');
         console.log(card);
       };
         //Removes card from top of stack
         $scope.cardDestroyed = function(index) {
             $scope.cards.splice(index, 1);
         };

         $scope.addCard = function() {
             var newCard = $scope.cards[$scope.cards.length];
             //newCard.id = Math.random();
             $scope.cards.push(angular.extend({}, newCard));
         };

        $scope.postRecordLikes = function(product_id){
            console.log(product_id)
            $http.post('http://test.com/analytic/' + product_id)
                .then(function successCallback(product_id) {
                    // this callback will be called asynchronously
                    // when the response is available
                }, function errorCallback(response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                });
        };
    }
])

where are you calling postRecordLikes ?

Shyju
– Shyju

2015-12-21 02:01:29 +00:00
Commented Dec 21, 2015 at 2:01 — Shyju
– Shyju, Commented Dec 21, 2015 at 2:01
No where else. This may have been a mistake

Yian
– Yian

2015-12-21 02:03:46 +00:00
Commented Dec 21, 2015 at 2:03 — Yian
– Yian, Commented Dec 21, 2015 at 2:03

Ignacio Villaverde · Accepted Answer · 2015-12-21 03:22:24Z

1

postRecordLikes is being defined but never used. You can call it in your html by different ways. If you want to call it when you click it for example, just use ng-click.

By the way, calling $http inside your controller is not a good practice, have a look at this post: https://toddmotto.com/resolve-promises-in-angular-routes/

EDIT

I have forked your plunkr. Take a look at it: http://plnkr.co/edit/uvooKeCtFagAnFjVYnhS?p=preview

You should call postRecordLikes when your event is fired. Modify it as you want.

edited Dec 21, 2015 at 3:22

answered Dec 21, 2015 at 2:27

Ignacio Villaverde

1,2641 gold badge11 silver badges15 bronze badges

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

12 Comments

Yian Over a year ago

Please show me how this would be done in my example- I have followed the docs and it still isn't clear.

Ignacio Villaverde Over a year ago

OK, but first explain a little bit better what you need. When the http POST should be triggered? When someone clicks on certain card?

Yian Over a year ago

On every card, a post should trigger. For swipe right of a card- it should post {'like':1, 'uid':21} to 'test.com/analytic/1234 (1234=product_id, taken from the HTML). For left, the same except {'like':0, 'uid':21}.

Ignacio Villaverde Over a year ago

but do you already have a way of managing that event? so you call postRecordLikes when that event fires?

Yian Over a year ago

No- I do not belive I do. I put this in a plunkr to make easier- plnkr.co/edit/7ScnGyy2eAmGwcJ7XZ2Z?p=preview

|

Collectives™ on Stack Overflow

Angular $HTTP posting- dynamic URL and defining post

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related