Best way to reset all values ​​in a Javascript object

Question

My javascript object looks something like this:

$scope.display = { current: { key1: 'value1', key2: ['a', 'b'], key3: 'value2' } } 

For some events in my code, I would like to reset these undefined values, as shown below:

 $scope.display = { current: { key1: undefined, key2: [], key3: undefined } } 

I use libraries like lodash, but I don't see any function that would do this. I know how to do this manually, but I was wondering if there is a Best Practice way to accomplish this task.

Answer 1

I would create a helper function that returns the structure of an object:

 function getDisplayObject() { return { current: { key1: undefined, // or you can omit undefined keys key2: [], key3: undefined } }; } $scope.display = getDisplayObject(); 

So when you need to reset the data, you again run $scope.display = getDisplayObject(); .

Answer 2

Here is my solution with the lodash mapValues function:

 var $clearObject = function(value) { if (_.isString(value)) { return undefined }; if (_.isArray(value)) { return []; }; }; var $scopeDisplay = { current: { key1: 'value1', key2: ['a', 'b'], key3: 'value2' } }; $scopeDisplay.current = _.mapValues($scopeDisplay.current, $clearObject); console.log($scopeDisplay); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> 

Answer 3

You would loop the properties of your object, for example,

 for (var key in current){ if (current.hasOwnProperty(key)){ if (typeof current[key] === 'string'){ current[key] = undefined; } else if (current[key] instanceof Array) { current[key] = []; } // else ??? Not sure how you want to handle other types } } 

Checking the array depending on some potential problems described in the comments here

Answer 4

How about this?

 // If you just want to reset a simple object let reset = (obj) => { Object.keys(obj).map(key => { if (obj[key] instanceof Array) obj[key] = [] else obj[key] = undefined }) } // If you want to reset a complex object let recursiveReset = (obj) => { Object.keys(obj).map(key => { // Test if it an Object if (obj[key] === Object(obj[key])) { recursiveReset(obj[key]) return } if (obj[key] instanceof Array) obj[key] = [] else obj[key] = undefined }) } // So you can simply use reset($scope.display.current) // or recursiveReset($scope.display) 

test link

Answer 5

In my Angular controller, I do the following:

  $scope.user = { firstname: "", lastname: "", displayname: "", email: "", password: "", passwordConfirm: "" }; // default state of the form $scope.default = angular.copy($scope.user); /** * Resets the form to its default state * @return {void} */ $scope.reset = function () { $scope.user = angular.copy($scope.default); } 

Initially, the area is empty, so I clone it, and whenever it needs to reset, just call the function. However, without knowing the volume of your project, it is difficult to determine the best way to process it.

Answer 6

I did this in an AngularJS controller as:

 function item_object() { var list_item = { ID: '', Title: '', LastName: '', Contact: '', City: '' }; return list_item; } //Define the object for the item $scope.Item = item_object(); // Reset product details $scope.clear = function () { $scope.Item = item_object(); } 

This way you are not saving a copy of an empty or default object. So no additional cost.

Answer 7

If you use jquery, it looks like you are doing this, you can do this:

First create an empty template for your object:

 var emptyTemplate = { current: { key1: undefined, key2: [], key3: undefined } } 

and then run:

  $scope.display = $.extend(true, {}, emptyTemplate); 

If you want to automate it, define data binding:

 var defaults = { String: undefined, Array: [], bool: false } 

Then a loop in your object, like other sentences:

 function resetObj (obj) { _(obj).forEach( function(value, key, objRef) { if (_.isObject(value)) { resetObj(objRef[key]); } else { var myvarType = typeOf value; objRef[key] = defaults[myvarType]; } } ); } 

I copied this nesting function from another answer by simply adding two cents.

Answer 8

There is no built-in way. You will need to loop through and set defaults based on type.

 var x = { current: { key1: 'value1', key2: ['a', 'b'], key3: 'value2' } }; _(x.current).forEach( function(value, key, obj) { var result = undefined; if (_.isArray(value)) { result = []; } obj[key] = result; } ); console.log(x); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 

The basic idea is if you have nested objects

 var x = { current: { key1: 'value1', key2: ['a', 'b'], key3: 'value2', xxxx: { keyx1: 'valuex1', keyx2: ['xa', 'xb'], keyx3: 'valuex2' } } }; function resetObj (obj) { _(obj).forEach( function(value, key, objRef) { var result = undefined; if (_.isObject(value)) { resetObj(objRef[key]); } else { if (_.isArray(value)) { result = []; } objRef[key] = result; } } ); } resetObj(x) console.log(x); 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 

Answer 9

A good way to handle this is to use a class instead of an object literal, for example:

 class current { constructor() { this.key1 = undefined; this.key2 = []; this.key3 = undefined; } } 

And whenever you want to clear all values, you can simply create a new instance of this class, for example:

 $scope.display.current = new current(); 

Answer 10

 function isObject (value) { return value && typeof value === 'object' && value.constructor === Object; } const resetObj = (obj, resetVal) => { if(!isObject(obj)) return; for(let i in obj){ if(!obj.hasOwnProperty(i)) continue; if(!isObject(obj[i])){ obj[i] = resetVal; }else{ resetObj(obj[i], resetVal); } } };