JSON解析与可视化-优快云博客

本文链接：https://blog.youkuaiyun.com/gao123ming/article/details/82320619

<!DOCUMENTTYPE>
<html>
<head>
<script>
var right ;
var posx = 0;
var posy = 0;
var isFirst = false;
var stepSzie = 200;
var heightSize = 50;
function generate(){
   right = document.getElementById("right");
   var value = document.getElementById("input").value;
   var jsonObj = JSON.parse(value);
   analize(jsonObj,0);
}
//递归遍历json
function analize(jsonObj,level){
   for(var p in jsonObj){
       var cell = jsonObj[p];
       if(typeof(cell) == 'object'){
           isFirst = true;
           posy+=heightSize;
           posx = stepSzie * (level);
           right.appendChild(generateCell(p,posx,posy,level));

           analize(cell,level+1);
       }else{
           if(isFirst){
               posx = stepSzie * (level);
           }
           posy+=heightSize;
           right.appendChild(generateCell(p,posx,posy,level));
           right.appendChild(generateCell(cell,posx+stepSzie,posy,level));
       }
   }
}
function generateCell(text,x,y,type){
   var div = document.createElement("div");
   div.textContent = text;
   div.style.backgroundColor = "rgb(42, 125, 171)";
   div.style.position = "absolute";
   div.style.top = y + "px";
   div.style.left = x + "px";
   div.style.color = "#fff";
   div.style.paddingLeft = "2px";
   div.style.paddingRight = "2px";
   div.style.borderRadius = "5px";
   div.style.boxShadow = "5px 5px 5px #000";
   div.id = type;
   return div;
}
function getById(id){
   return document.getElementById(id);
}
</script>
<style>
.left{
   border:1px solid #f00;
   width:500px;
   height:800px;
   position:absolute;
   left:1px;

}
.right{
   border:1px solid #f00;
   width:1300px;
   height:800px;
   position:absolute;
   right:1px;
}
.inputStyle{
   width: 400px;
   height: 400px;
}
</style>
</head>
<body>
</body>