CODEWITHSUNDEEP
angularjshttp
mikee
mikee

Reputation: 11

How to update data inside the RESP API

I'm new to angularjs and I'm trying to work with one of the API endpoints for example /jewelry. I'm trying to update the data(*product 5) inside that endpoint using the PUT method. Here is my code:

    mainModule.controller('newArrivalController', ['$scope', '$http', function($scope, $http){

    $http({
        method: 'GET',
        url: 'https://sampleproductapi.com/products/category/jewelery'
    }).then(function successCallBack(response){
        $http({
            method: 'PUT',
            url: 'https://sampleproductapi.com/products/5',
            data: JSON.stringify({
                category: "jewelery",
                description: "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
                id: 5,
                image: "https://sampleproductapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
                price: 695,
                rating: {
                    rate: 4.6, 
                    count: 400},
                title: "Title Test Product"
            })
        }).then(function successCallBack(response){
            $scope.product5 = response.data;
            console.log($scope.product5);
        })

        $scope.newArrivalItems = response.data;
        console.log($scope.newArrivalItems);
        
    }, function errorCallBack(response){
        console.log(response)
    });
    
}])

I saw the product is updated when I console.log($scope.product5), However, the product is still not updated once I console.log the $scope.newArrivalItems. May I know what is wrong with my code?

Upvotes: 0

Views: 42

Answers (1)

Aastha Bist
Aastha Bist

Reputation: 356

$scope.newArrivalItems is not initialised in the success callback of the PUT API call.

So, $scope.newArrivalItems will be initialised using response.data that does not belong to PUT API call's response (the scope seems to be in the outer GET API call instead).

The code can be modified as follows to achieve this:

$http({
            method: 'PUT',
            url: 'https://sampleproductapi.com/products/5',
            data: JSON.stringify({
                category: "jewelery",
                description: "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
                id: 5,
                image: "https://sampleproductapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
                price: 695,
                rating: {
                    rate: 4.6, 
                    count: 400},
                title: "Title Test Product"
            })
        }).then(function successCallBack(response){
            $scope.product5 = response.data;
            return response.data;
        }).then(function (data) {
            $scope.newArrivalItems = data;
        });

And remove $scope.newArrivalItems from its original position in your code.

Hope this helps.

Upvotes: 0

Related Questions