example Json-Editor

example.js

var cfg = {
  "first": {
    "label": "Habitat",
    "children": ["water", "air", "ground"]
  },
  "water": {
    "title": "Animal",
    "label": "In Water",
    "children": ["fish", "squid", "crab"]
  },
  "air": {
    "title": "Animal",
    "label": "In the Air",
    "children": ["bird", "bat", "bee", "butterfly"]
  },
  "ground": {
    "title": "Animal",
    "label": "On the Ground",
    "children": ["horse", "dog"]
  },
  "fish": {
    "title": "Type of fish",
    "label": "Fish",
    "children": ["gooberfish", "klaus", "nemo"]
  },
  "squid": {
    "label": "Squid"
  },
  "crab": {
    "label": "Crab"
  },
  "bird": {
    "label": "Bird"
  },
  "bat": {
    "label": "Bat"
  },
  "bee": {
    "label": "Bee"
  },
  "butterfly": {
    "label": "Butterfly"
  },
  "horse": {
    "label": "Horse"
  },
  "dog": {
    "label": "Dog"
  },
  "gooberfish": {
    "label": "Gooberfish"
  },
  "klaus": {
    "label": "Klaus Heissler"
  },
  "nemo": {
    "label": "Nemo"
  }
};

var form = document.querySelector('#json-editor-form');
var startval = jseditor.getValue();
var schema = jseditor.schema;

// Build dynamic enum schema parts
var buildSchemaPart = function(key, dataArray) {

  if (dataArray[key] && dataArray[key].children) {
    var children = dataArray[key].children;

    var enumVals = JSON.parse(JSON.stringify(children));
    enumVals.unshift('');

    var enumTitles = children.map(function(key) {
      return dataArray[key].label;
    });
    enumTitles.unshift('Select');

    schema.properties[key] = {
      "type": "string",
      "title": dataArray[key].title || dataArray[key].label,
      "enum": enumVals,
      "options": {
        "enum_titles": enumTitles
      }
    };
  }

};

// Remove unused children
var removeUnusedChildren = function(children, dataArray) {
  children.forEach(function(key) {
    delete schema.properties[key];
    if (dataArray[key] && dataArray[key].children) {
      removeUnusedChildren(dataArray[key].children, dataArray);
    }
  });
};

// Watch all dynamic fields
var setWatchers = function(dataArray) {
  var path = 'root.';
  Object.keys(dataArray).forEach(function(key) {

    jseditor.watch(path + key, function() {
      var ed = jseditor.getEditor(path + key);
      var val = ed.getValue();
      console.log('change detected in field: "' + key + '":', val);

      startval = jseditor.getValue();
      startval[key] = val;

      if (dataArray[key].children) {
        removeUnusedChildren(dataArray[key].children, dataArray);
      }

      generateForm(val, dataArray);

    });

  });
};

// Generate the form
var generateForm = function(key, dataArray) {

  buildSchemaPart(key, dataArray);

  // Regenerate the form
  if (jseditor) jseditor.destroy();
  jseditor = new window.JSONEditor(form, {
    schema: schema, startval: startval
  });

  setWatchers(dataArray);
};


jseditor.on('ready', function() {
  // Set the 1st field.
  generateForm('first', cfg);
});