JSON schema to tree

by sachid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.js"></script>
<div style="display:inline-block;">
  <ul id="input-structure" class="structure">
  </ul>
</div>

CSS

.structure,
   .structure ul {
     list-style-type: none;
     text-indent: 5px;
   }
   
   li {
     border-bottom: 1px solid #c9c9c9;
     border-left: 1px solid #c9c9c9;
     width: max-content;
   }

JavaScript

var data = {
  "title": "person",
  "type": "object",
  "properties": {
    "first name": {
      "type": "string"
    },
    "last name": {
      "type": "string"
    },
    "age": {
      "type": "number"
    },
    "birthday": {
      "type": "string",
      "format": "date-time"
    },
    "address": {
      "type": "object",
      "properties": {
        "street address": {
          "type": "object",
          "properties": {
            "house number": {
              "type": "number"
            },
            "lane": {
              "type": "string"
            }
          }
        },
        "city": {
          "type": "string"
        },
        "state": {
          "type": "string"
        },
        "country": {
          "type": "string"
        }
      }
    },
    "phone number": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "location": {
            "type": "string"
          },
          "code": {
            "type": "number"
          }
        },
        "required": [
          "location",
          "code"
        ]
      }
    },
    "children": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "nickname": {
      "type": "string"
    }
  }
};

var title = data.title || "Root";
var result = d3.select("#trial-container");
var result1 = d3.select("#input-structure");
traverseJSONSchema1(data, title, result1, 0, 0);





function traverseJSONSchema1(root, rootname, resultpane, lev, rank) {

  if (root.type === "object") {
    var listitem = resultpane.append("li");
    if (rootname !== "") {
      listitem.text(rootname + ":" + root.type + "-" + lev + "-" + rank);
      rank++;
      lev++;
    }
    var newlist = listitem.append("ul");
    var items = root.properties; //select PROPERTIES
    for (var i = 0; i < Object.keys(items).length; i++) { //traverse through each PROPERTY of the object
      var itemname = Object.keys(items)[i];
      var item =...