CODEWITHSUNDEEP
htmlangularjsangularjs-directive
Ashwin
Ashwin

Reputation: 12411

Angular store response as default json

Using angular I am creating a theming app. It has a reset theme feature, which will allow user to reset the theme to earlier. Below is my angular code so far. I have created 2 json variables in the same scope - currentTheme and defaultTheme. currentTheme is binded to form elements using which user can modify the values of various properties.

        var ThemeApp = angular.module('ThemeApp', []);
        ThemeApp.controller('ThemeCtrl', ['$scope', '$http', function ($scope, $http) {
            $http.get("javascripts/myTheme.json").success(function(data) {
                $scope.defaultTheme = data;
                $scope.currentThemes = data;
                console.log($scope.defaultTheme[0]);
            });
            $scope.saveTheme = function() {
                ...
            };
            $scope.resetTheme = function() {
                console.log($scope.defaultTheme);
                $scope.currentThemes = $scope.defaultTheme;
            };
        }]);

When we change the values in the form fields then the defaultTheme json is also getting changed. I can observe this from console statement in the resetTheme function. I have also tried taking defaultTheme as a global variable but it also gets changed. Is there a solution to this?

Upvotes: 0

Views: 59

Answers (1)

lbrazier
lbrazier

Reputation: 2654

You could use lodash to do a cloneDeep of the data object when you assign it to defaultTheme. That way they will start out as the same values but different objects, so when you change the form, it doesn't change the defaults. Code would look like this:

$scope.defaultTheme = _.cloneDeep(data);

Upvotes: 1

Related Questions