Best way to reset all values in an Javascript object

Question

My javascript object looks something like:

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

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

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

I use libraries like lodash, however i don't see any function that would perform this. I know how to do this manually, but I was wondering if there is a "Best practices" way of performing this task.

Answer 1

I would create a helper function returning object structure:

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

$scope.display = getDisplayObject();

So later when you need to reset data you would execute $scope.display = getDisplayObject(); again.

Answer 2

Here is my solution with 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 like this

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

Array check subject to some potential problems described in the comments here

Answer 4

What 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's 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 scope is empty, so I clone it, and whenever it needs reset, simply call a function. However, without knowing the scope of your project, it's hard to determine the best way to handle it.

Answer 6

I did it in 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();
}

In this way you do not keep a copy of empty or default object. So no extra cost.

Answer 7

If you are using Jquery, like it seems you are doing, you can do that:

Preapre an empty template of 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 some data binding:

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

Then loop in your object, like other suggestions:

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 other answer, just to add my two cents.

Answer 8

There is no built in way. You would need to loop through and set the 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>

Basic idea 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 deal with this would be to use a class instead of an object literal, like:

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

And whenever you want to clear all the values you can just create a new instance of this class, like:

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

Answer 11

+++++++++++++++++++++++++Typescript solution+++++++++++++++++++++++++++

 private deviceSettingsToReset: RemoteDeviceSetting;
    
    // depp copy of response into deviceSettingsToReset variable which need to use in reset functionality in UI.
    this.deviceSettingsToReset = JSON.parse(JSON.stringify(response));
    
    // assign value from original copy.
    this.selectedAlgorithm = JSON.parse(JSON.stringify(this.deviceSettingsToReset));