Implement `update` method (WIP)

src/js/Node.js

@@ -330,21 +330,14 @@ Node.prototype.getField = function() {
  */
 Node.prototype.setValue = function(value, type) {
   var childValue, child, visible;
+  var i, j;
   var notUpdateDom = false;
 
-  // first clear all current childs (if any)
-  var childs = this.childs;
-  if (childs) {
-    while (childs.length) {
-      this.removeChild(childs[0], notUpdateDom);
-    }
-  }
-
   this.type = this._getType(value);
 
   // check if type corresponds with the provided type
-  if (type && type != this.type) {
-    if (type == 'string' && this.type == 'auto') {
+  if (type && type !== this.type) {
+    if (type === 'string' && this.type === 'auto') {
       this.type = type;
     }
     else {
@@ -354,40 +347,79 @@ Node.prototype.setValue = function(value, type) {
     }
   }
 
-  if (this.type == 'array') {
+  if (this.type === 'array') {
     // array
-    this.childs = [];
-    for (var i = 0, iMax = value.length; i < iMax; i++) {
+    if (!this.childs) {
+      this.childs = [];
+    }
+
+    for (i = 0; i < value.length; i++) {
       childValue = value[i];
       if (childValue !== undefined && !(childValue instanceof Function)) {
-        // ignore undefined and functions
-        child = new Node(this.editor, {
-          value: childValue
-        });
-        visible = i < this.MAX_VISIBLE_CHILDS;
-        this.appendChild(child, visible, notUpdateDom);
-      }
-    }
-    this.value = '';
-  }
-  else if (this.type == 'object') {
-    // object
-    this.childs = [];
-    i = 0;
-    for (var childField in value) {
-      if (value.hasOwnProperty(childField)) {
-        childValue = value[childField];
-        if (childValue !== undefined && !(childValue instanceof Function)) {
-          // ignore undefined and functions
+        if (i < this.childs.length) {
+          // reuse existing child, keep its state
+          child = this.childs[i];
+
+          child.fieldEditable = false;
+          child.index = i;
+          child.setValue(childValue);
+        }
+        else {
+          // create a new child
           child = new Node(this.editor, {
-            field: childField,
             value: childValue
           });
           visible = i < this.MAX_VISIBLE_CHILDS;
           this.appendChild(child, visible, notUpdateDom);
         }
+      }
+    }
+
+    // cleanup redundant childs
+    // we loop backward to prevent issues with shifting index numbers
+    for (j = this.childs.length; j >= value.length; j--) {
+      this.removeChild(this.childs[j], notUpdateDom);
+    }
+  }
+  else if (this.type === 'object') {
+    // object
+    if (!this.childs) {
+      this.childs = [];
+    }
+
+    // cleanup redundant childs
+    // we loop backward to prevent issues with shifting index numbers
+    for (j = this.childs.length - 1; j >= 0; j--) {
+      if (!value.hasOwnProperty(this.childs[j].field)) {
+        this.removeChild(this.childs[j], notUpdateDom);
+      }
+    }
+
+    i = 0;
+    for (var childField in value) {
+      if (value.hasOwnProperty(childField)) {
+        childValue = value[childField];
+        if (childValue !== undefined && !(childValue instanceof Function)) {
+          child = this.findChildByProperty(childField);
+
+          if (child) {
+            // reuse existing child, keep its state
+            child.setField(childField, true);
+            child.setValue(childValue);
+          }
+          else {
+            // create a new child
+            child = new Node(this.editor, {
+              field: childField,
+              value: childValue
+            });
+            visible = i < this.MAX_VISIBLE_CHILDS;
+            this.appendChild(child, visible, notUpdateDom);
+          }
+        }
         i++;
       }
+
     }
     this.value = '';
 
@@ -398,6 +430,7 @@ Node.prototype.setValue = function(value, type) {
   }
   else {
     // value
+    this.hideChilds();
     this.childs = undefined;
     this.value = value;
   }

src/js/treemode.js

@@ -199,6 +199,15 @@ treemode.set = function (json, name) {
   }
 };
 
+treemode.update = function (json) {
+  // TODO
+  // this.content.removeChild(this.table);  // Take the table offline
+
+  this.node.setValue(json);
+
+  // this.content.appendChild(this.table);  // Put the table online again
+};
+
 /**
  * Get JSON object from editor
  * @return {Object | undefined} json

test/test_update.html

@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>JSONEditor | Update JSON</title>
+
+    <!-- when using the mode "code", it's important to specify charset utf-8 -->
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+
+    <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+    <script src="../dist/jsoneditor.js"></script>
+
+    <style type="text/css">
+        body, html {
+            font: 10.5pt arial;
+            color: #4d4d4d;
+            line-height: 150%;
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+        }
+
+        .main {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+        }
+
+        .main > div {
+            margin: 10px;
+        }
+
+        #jsoneditor {
+            flex: 1;
+            width: 100%;
+            max-width: 500px;
+            height: 200px;
+        }
+    </style>
+</head>
+<body>
+    <div class="main">
+        <div>
+            <button id="update">update JSON</button>
+        </div>
+        <div id="jsoneditor"></div>
+    </div>
+
+    <script>
+      var container = document.getElementById('jsoneditor');
+      var updateButton = document.getElementById('update');
+
+      var options = {
+        mode: 'tree',
+        modes: ['code', 'form', 'text', 'tree', 'view'] // allowed modes
+      };
+
+      var json = {
+        "arrayToObject": [1, 2, 3],
+        "arrayGrow": [1, 2, 3],
+        "arrayShrink": [1, 2, 3],
+        "autoToArray": 123,
+        "ArrayToAuto": [1, 2, 3],
+        "objectGrow": {"a": "b", "c": "d"},
+        "objectShrink": {"a": "b", "c": "d"},
+        "objectToArray": {"a": "b", "c": "d"},
+        "removeField": "old"
+      };
+
+      var updatedJson = {
+        "arrayToObject": {"a": "b", "c": "d"},
+        "arrayGrow": [1, 2, 3, 4, 5],
+        "arrayShrink": [1, 3],
+        // "autoToArray": [1, 2, 3], // FIXME: doesn't work yet (misses expand button)
+        // "ArrayToAuto": 123,  // FIXME: doesn't work yet (throws error)
+        "objectGrow": {"a": "b", "c": "ddd", "e": "f"},
+        "objectShrink": {"c": "d"},
+        "objectToArray": [1, 2, 3],
+        "newField": "new"
+      };
+
+      var editor = new JSONEditor(container, options, json);
+
+      editor.expandAll();
+
+      updateButton.onclick = function () {
+        editor.update(updatedJson);
+      }
+    </script>
+</body>
+</html>