References to objects or pain of an angular developer?

Question

JavaScript

Hello. Wrote a service interceptor that modifies config.data when accessing a specific URL. And to be more precise, it encrypts some elements of the object with the AES algorithm.
We have a table where the data is edited directly in the cells. And after pressing the "Save" button, we send the table row as JSON to the server. The service is something like this:

/*global angular*/
(function () {
  'use strict';

  angular
    .module('App')
    .factory('httpRequestEncriptAES', ['$q', '$injector', '$log',
                          httpRequestEncriptAES]);

  /**
   * @name httpRequestEncriptAES
   */
  function httpRequestEncriptAES($q, $injector, $log) {
    var self = {};
    self.jsonRegexp = /^application\/json;\s*charset=[a-zA-Z0-9\-\_]+/i;
    self.API = $injector.get('API');
    self.Crypto = $injector.get('cryptoFactory');

    self.request = function (config) {
      var m;
      /**
       * Проверяем, что отправляется и куда.
       * Если мы отправляем JSON и в URL запроса есть /api/v1/keeper,
       * то шифруем данные.
       */
      if((m = self.jsonRegexp.exec(config.headers['Content-Type'])) !== null){
        if(config.url.indexOf(self.API.makeUrl(self.API.URLS.keeper)) == 0){
          $log.debug("httpRequestEncriptAES Encrypt before:", config.data);
          
          /**
           * Шифруем информацию
           */
          config.data = self.Crypto.encrypt(config.data);
          
          $log.debug("httpRequestEncriptAES Encrypt after:", config.data);
        }
      }

      return config;
    };

    self.response = function (response) {
      var m;
      if((m = self.jsonRegexp.exec(response.headers()['content-type'])) !== null){
        if(response.config.url.indexOf(self.API.makeUrl(self.API.URLS.keeper)) == 0 && response.data && response.data.docs){
          var response_data = angular.fromJson(response.data);
          $log.debug("httpRequestEncriptAES Decrypt before:", response_data.docs);
          
          // Дешифруем информацию
          response.data.docs = self.Crypto.decrypt(response_data.docs);
          
          $log.debug("httpRequestEncriptAES Decrypt after:", response.data.docs);
        }
      }

      return response;
    };

    return self;
  }

})();

And the function that encrypts the data:

self.encrypt = function (objectData) {  <- config.data из request
      for (var key in objectData) {
        if (objectData.hasOwnProperty(key)) {
            if((self.targetKeys.indexOf(key) > -1)){
            objectData[key] = self.Crypt.AES.encrypt(objectData[key], self.key);
          }
        }
      }
      var encObject = angular.extend({}, objectData);
      return encObject;
    };

The problem is this. After the encryption function works out, the data in the table is also modified, but it is not necessary)) When the page is loaded, the data is normally decrypted and displayed in its normal form. But it is worth changing and trying to save - and tryndets. How to be?

Answer 1

Try doing this:

self.encrypt = function (objectData) {  <- config.data из request
  var encObject = {};
  for (var key in objectData) {
    if ( objectData.hasOwnProperty(key) && self.targetKeys.indexOf(key) !== -1) {
       encObject [key] = self.Crypt.AES.encrypt(objectData[key], self.key);
    }
  }
  return encObject;
};

Answer 2

try writing the encryption result to a local variable without overwriting the current data. after all, you display data in the template from config.data