Polymer Clone Objects

Question

How can we clone an object in Polymer?

Example

this.colorsAsc.push({color: 'red'});
this.colorsDesc = this.colorsAsc.reverse();

this.colorsDesc[0].color = 'blue'; // Both will be blue doing this

I can do it in these many functionalities What is the most efficient way to deep clone an object in JavaScript? but I wonder if there is a way in Polymer to do that?

Angular does it https://docs.angularjs.org/api/ng/function/angular.copy

You can use [`lodash`](https://lodash.com/docs#clone) for that. — Walid Ammar, Dec 21 '14 at 06:27
Polymer isn't a full framework, it's a web-components library. As it, it doesn't have a native deep copy function (as it doesn't have many native functions). As @MohammadWalid said, `lodash` is a good solution, for example. — LostInBrittany, Dec 21 '14 at 16:36
I did it differently at the end, so I don't need this anymore. Thanks guys. — Shadoweb, Dec 22 '14 at 16:01
@Shadowbob could you please share your solution as many people will probably need an help on that behind you like me. thanks — vdegenne, Jun 21 '15 at 23:09
@발렌탕 you can see what I did on https://github.com/hwebb/hwebb-load-bar. But this is for Polymer 0.5, not Polymer 1.0, and I didn't need that yet so didn't check if there is another way. — Shadoweb, Jun 22 '15 at 09:07

score 1 · Answer 1 · edited Aug 18 '16 at 11:43

1

You can try the following hack:

this.colorsDesc = JSON.parse(JSON.stringify(this.colorsAsc.reverse());

edited Aug 18 '16 at 11:43

Kurt Van den Branden

11,995
10
76
85

answered Aug 18 '16 at 09:14

Aditya kumar

167
2
8

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

I have had the same question here, where I have finally also found and posted an answer.

Short version:

newElement = element.cloneNode(true);
for(var i in element.properties) {
        newElement[i] = element[i]
      }

edited May 23 '17 at 11:53

Community

1
1

answered Sep 12 '15 at 11:34

ootwch

930
11
32

this does not work if you are trying to clone light DOM elements inside the top-level ones. – codeMonkey Oct 02 '16 at 17:44

score 0 · Answer 3 · edited Dec 05 '16 at 02:49

To clone a utility via Polymer

Full implementation:

  (function(callBackFn) {
      Polymer({

          //Component Name
          is: 'my-cloner',

          properties: {
              //Declare a published property 
              cloneableObject: { //Placeholder for Object to be cloned 
                  reflectToAttribute: true,
                  type: Object,
                  notify: true
              }
          },

          attached: function() {
              //Hide if this component got attached
              this.hidden = true;
          },

          getClone: function(incomingcloneableObject) { //Will be called to get the Clone

              this.cloneableObject = this.cloneableObject || incomingcloneableObject;

              switch (typeof this.cloneableObject) {
                  case "undefined":
                      return null;
                      break;
                  case "object":
                      var localClone = this.cloneNode();
                      return (localClone.cloneableObject);
                      break;
                  case "boolean":
                      return new Boolean(this.cloneableObject).valueOf();
                      //Other possible way 
                      //return(this.cloneableObject ? true : false);
                      break;
                  case "number": //NaN is taken care of 
                      return new Number(this.cloneableObject).valueOf();
                      //Other possible way
                      //return(this.cloneableObject * 1);
                      break;
                  case "string":
                      return new String(this.cloneableObject).valueOf();
                      //Other possible way
                      //return(this.cloneableObject + '');
                      break;
                  default:
                      return null;
              }
          }
      });

      //adding Util into window
      callBackFn();

  })(function() {
      window.cloneUtil = document.createElement('my-cloner');
  });
  //To use this util
  //window.cloneUtil.getClone();

Polymer Clone Objects

3 Answers3

Linked