jQuery.extend() and Object.assign fail

Question

I'm trying to deep copy a huge Json content. But, unfortunately, It still referencing the object.

The elobj content:

{
  "children": [
    {
      "children": [
        {
          "children": [],
          "cfg": {
            "blockName": "",
            "binding": {
              "cbind": {},
              "cBindAttrTexts": {},
              "cBindAttr": {}
            },
            "layout": {},
            "include": {}
          },
          "frontCfg": {
            "pseudoClasses": {
              "selectedClass": "None",
              "InlineOrSelector": "Inline",
              "selectedSelector": "New"
            }
          },
          "natifChildren": {},
          "cssConfig": {},
          "htmlConfig": {
            "class": {},
            "attr": {}
          },
          "CBindTexts": [],
          "CBindAttrTexts": {},
          "CBindAttr": {},
          "cssValues": {},
          "customAttrs": {},
          "type": "text",
          "content": "A paragraph"
        }
      ],
      "cfg": {
        "blockName": "",
        "binding": {
          "cbind": {},
          "cBindAttrTexts": {},
          "cBindAttr": {},
          "cBind": {
            "entity": "Entity2",
            "field": "column2"
          }
        },
        "layout": {},
        "include": {},
        "js": {}
      },
      "frontCfg": {
        "pseudoClasses": {
          "selectedClass": "None",
          "InlineOrSelector": "Inline",
          "selectedSelector": "New"
        }
      },
      "natifChildren": {},
      "cssConfig": {
        "width": [
          "auto",
          [
            "1266",
            "px"
          ]
        ],
        "height": [
          "auto",
          [
            "20",
            "px"
          ]
        ],
        "backgroundSize": [
          "auto auto",
          [
            0,
            "px"
          ],
          [
            0,
            "px"
          ]
        ],
        "backgroundPosition": [
          "custom",
          [
            "0",
            "%"
          ],
          [
            "0",
            "%"
          ]
        ]
      },
      "htmlConfig": {
        "class": {},
        "attr": {}
      },
      "CBindTexts": [],
      "CBindAttrTexts": {},
      "CBindAttr": {},
      "cssValues": {},
      "customAttrs": {},
      "tag": "p",
      "type": "p"
    }
  ],
  "cfg": {
    "blockName": "",
    "binding": {
      "cbind": {},
      "cBindAttrTexts": {},
      "cBindAttr": {},
      "cBind": {}
    },
    "layout": {},
    "include": {},
    "js": {}
  },
  "frontCfg": {
    "pseudoClasses": {
      "selectedClass": "None",
      "InlineOrSelector": "Inline",
      "selectedSelector": "New"
    }
  },
  "natifChildren": {},
  "cssConfig": {
    "width": [
      "auto",
      [
        "1266",
        "px"
      ]
    ],
    "height": [
      "auto",
      [
        "30",
        "px"
      ]
    ],
    "backgroundSize": [
      "auto auto",
      [
        0,
        "px"
      ],
      [
        0,
        "px"
      ]
    ],
    "backgroundPosition": [
      "custom",
      [
        "0",
        "%"
      ],
      [
        "0",
        "%"
      ]
    ]
  },
  "htmlConfig": {
    "class": {},
    "attr": {}
  },
  "CBindTexts": [],
  "CBindAttrTexts": {},
  "CBindAttr": {},
  "cssValues": {},
  "customAttrs": {},
  "tag": "div",
  "type": "div"
}

The cloning code:

var elobj = elem.myApp().getElementObject();
var elemObject = $.extend(true, {}, elobj);
elemObject.children[0].cfg.binding.cBind.field = "id";
console.log(elobj)

After I cloned the elobj to elemObject. When I change the field to "id", field from the variable elobj should have the original value which is "column2". But both changed to "id".

@torazaburo to avoid referencing. To have 2 objects with the same value and to be able to change each object properties without having to change them all. But I found the solution `JSON.parse(JSON.stringify(obj))` whichs make it work very well. — user3502626, Aug 02 '18 at 03:41

jQuery.extend() and Object.assign fail

0 Answers0