Tips for stripping out the $promise and $resolved properties from a JSON object

Question

Tips for stripping out the $promise and $resolved properties from a JSON object

Utilizing $resource in Angular, I am retrieving a JSON object with the following structure:

[
    {
        "id": 0,
        "name": "Type1"
    },
    {
        "id": 1,
        "name": "Type 2"
    }
]

Upon fetching the data, when I console.log(jsonObject), it displays:

[Resource, Resource, $promise: Object, $resolved: true]

I am seeking a way to eliminate $promise & $resolved from the resulting object. I attempted using angular.fromJson(json), but these properties persist.

javascript angularjs

Answer 1

Answer №1

In my search for a solution, I have come across an unconventional method that serves its purpose:

Consider creating a function like the one below:

function refineData(data) {
    return JSON.parse(angular.toJson(data));
}

You can then utilize this function in each query as shown here (admittedly not the most elegant approach):

function fetchData() {
    Resource.fetch({}, function (result) {
        $scope.data = refineData(result);
    }, function (error) {
        //handle error
    })
}

I am open to learning a more efficient way of achieving this if anyone is willing to share their knowledge.

Answer 2

In my search for a solution, I have come across an unconventional method that serves its purpose:

Consider creating a function like the one below:

function refineData(data) {
    return JSON.parse(angular.toJson(data));
}

You can then utilize this function in each query as shown here (admittedly not the most elegant approach):

function fetchData() {
    Resource.fetch({}, function (result) {
        $scope.data = refineData(result);
    }, function (error) {
        //handle error
    })
}

I am open to learning a more efficient way of achieving this if anyone is willing to share their knowledge.

Answer 3

Answer №2

Snippet from one of my coding projects

Accessing the shared diaries in Diary app:
Diary.getSharedWithMe(function(data) {
        delete data.$promise;
        delete data.$resolved;
        _self.sharedDiariesWithMe = data;
    }, function(error) {
        console.log(error)
    });

Answer 4

Snippet from one of my coding projects

Accessing the shared diaries in Diary app:
Diary.getSharedWithMe(function(data) {
        delete data.$promise;
        delete data.$resolved;
        _self.sharedDiariesWithMe = data;
    }, function(error) {
        console.log(error)
    });

Answer 5

Answer №3

According to the insights provided in this response, it seems that you can easily access yourResource.toJSON().

Answer 6

According to the insights provided in this response, it seems that you can easily access yourResource.toJSON().

Answer 7

Answer №4

Dealing with the same issue multiple times led me to always defaulting to using $http instead of $resource. However, today I made a conscious effort to tackle this problem head-on. Hopefully, someone will benefit from this solution in the future.

Once you have retrieved your object containing $promise, simply use angular.copy(data) like this:

someService.fetchData($scope.someId).$promise.then(function (data) {
    if (data) {
        $scope.filteredData = angular.copy(data);
    }
});

Now, observe that your filteredData only includes the necessary objects, with $promise and $resolved no longer present.

Answer 8

Dealing with the same issue multiple times led me to always defaulting to using $http instead of $resource. However, today I made a conscious effort to tackle this problem head-on. Hopefully, someone will benefit from this solution in the future.

Once you have retrieved your object containing $promise, simply use angular.copy(data) like this:

someService.fetchData($scope.someId).$promise.then(function (data) {
    if (data) {
        $scope.filteredData = angular.copy(data);
    }
});

Now, observe that your filteredData only includes the necessary objects, with $promise and $resolved no longer present.

Answer 9

Answer №5

Dealing with a similar problem myself. Fortunately, I discovered that by ensuring both angular and angular-resource are the same version, the issue disappeared effortlessly. I trust this advice proves beneficial to you!

Answer 10

Dealing with a similar problem myself. Fortunately, I discovered that by ensuring both angular and angular-resource are the same version, the issue disappeared effortlessly. I trust this advice proves beneficial to you!

Answer 11

Answer №6

In a nutshell: By using the angular.fromJson(angular.toJson(resp)) method, you can strip away any specialized Angular functions and obtain a pristine data object.

Answer 12

In a nutshell: By using the angular.fromJson(angular.toJson(resp)) method, you can strip away any specialized Angular functions and obtain a pristine data object.

Answer 13

Answer №7

Are you utilizing the isArray function or the .query() method in conjunction with your $resource object?

According to the $resource documentation:

isArray – {boolean=} – If true then the returned object for this action is an array.

UPDATE:

If you are properly implementing $resource, here are some options available to you:

1) Have the backend deliver the data within an object, for example, { data: [] } instead of just an array.

2) If that is not feasible, utilize the callback from the $resource.query() method, like so:

MyResource.query({ myParams: 'something'}, function(result) {
    // Perform actions on the result
});

Answer 14

Are you utilizing the isArray function or the .query() method in conjunction with your $resource object?

According to the $resource documentation:

isArray – {boolean=} – If true then the returned object for this action is an array.

UPDATE:

If you are properly implementing $resource, here are some options available to you:

1) Have the backend deliver the data within an object, for example, { data: [] } instead of just an array.

2) If that is not feasible, utilize the callback from the $resource.query() method, like so:

MyResource.query({ myParams: 'something'}, function(result) {
    // Perform actions on the result
});

Answer 15

Answer №8

I came up with a quick and reusable method to use angular.toJson (removing properties with leading $$):

yourApp.factory('Service', ['$resource', function ($resource) {
    return $resource('your/rest/api/path');
}]);

 yourApp.factory('commonServices', function () { 
         return {
                toJson : function(response){
                    return JSON.parse(angular.toJson(response));
                     //*or* 
                    //return angular.toJson(response);
                }
    });

You can then implement something like this in your controller:

 yourApp.controller('Controller', ['$scope', 'Service','commonServices',  
function ($scope, Service, commonServices) {
            Service.get().then(function (data) {
                $scope.myData = commonServices.toJson(data);
            });
        });

A simpler way is to directly use angular.toJson within the controller:

 yourApp.controller('Controller', ['$scope', 'Service',  
function ($scope, Service, commonServices) {
            Service.get().then(function (data) {
                $scope.myData = angular.toJson(data);
            });
        });

Answer 16

I came up with a quick and reusable method to use angular.toJson (removing properties with leading $$):

yourApp.factory('Service', ['$resource', function ($resource) {
    return $resource('your/rest/api/path');
}]);

 yourApp.factory('commonServices', function () { 
         return {
                toJson : function(response){
                    return JSON.parse(angular.toJson(response));
                     //*or* 
                    //return angular.toJson(response);
                }
    });

You can then implement something like this in your controller:

 yourApp.controller('Controller', ['$scope', 'Service','commonServices',  
function ($scope, Service, commonServices) {
            Service.get().then(function (data) {
                $scope.myData = commonServices.toJson(data);
            });
        });

A simpler way is to directly use angular.toJson within the controller:

 yourApp.controller('Controller', ['$scope', 'Service',  
function ($scope, Service, commonServices) {
            Service.get().then(function (data) {
                $scope.myData = angular.toJson(data);
            });
        });

Answer 17

Answer №9

Here is a simple solution:

jsonObject.$promise = null; jsonObject.$resolved = null;

By setting $promise and $resolved to null instead of undefined, you can have more flexibility in your code.

Answer 18

Here is a simple solution:

jsonObject.$promise = null; jsonObject.$resolved = null;

By setting $promise and $resolved to null instead of undefined, you can have more flexibility in your code.

Answer 19

Answer №10

Why not try implementing a service and controller with similar code like this:

myApp.factory('MyService', ['$http', function ($http) {
    return $http.get('your/api/path');
}]);

Then in your controller, you can do something like this:

myApp.controller('MyController', ['$scope', 'MyService', function ($scope, MyService) {
    MyService.then(function (response) {
        $scope.data = response.data;
    });
});

Answer 20

Why not try implementing a service and controller with similar code like this:

myApp.factory('MyService', ['$http', function ($http) {
    return $http.get('your/api/path');
}]);

Then in your controller, you can do something like this:

myApp.controller('MyController', ['$scope', 'MyService', function ($scope, MyService) {
    MyService.then(function (response) {
        $scope.data = response.data;
    });
});

Tips for stripping out the $promise and $resolved properties from a JSON object

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

`Troubleshooting Issue: Autocomplete feature in Jquery Codeigniter not functioning

My Angular7 app.component.html file is not displaying the routing. What could be the issue?

Combining arrays in JavaScript to form object values with lodash

What is the location of the files stored using the cordova-file-plugin?

There seems to be a glitch in the AJAX code

"An error is occurring in JavaScript: $ is not defined, but I am uncertain of the reason for it

iOS Safari 16.5 failing to show permission prompt for Notification.requestPermission() prompt

Error: The requested address is currently in use by Node.js and Express

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Learn the process of transferring information through ajax while managing dependent drop-down menus

What is the process for handling authorization in RESTful requests using angularjs?

Tips for sending an API request from a local Ionic server to a separate local Express server

Updating environment variables in a React app without the need to rebuild the image

The inverse function for Ember Handlebars helper options is experiencing an undefined error

Combining Objects in an Array using JavaScript

Using ngTouch for ng-click events on the body element can cause issues with links and input fields on mobile

Trouble updating values in Javascript objects

Creating a static view in ng-admin without triggering a backend request

Display the contents of a post within the same page using ReactJS

Error in Vue: Trying to set a property ('message') on an undefined object