dgbuilder/tools/json_to_html

   1 try{
   2 var jsonStr='{}';
   3 jsonObj=JSON.parse(jsonStr);
   4 var objectId =0;
   5 var level=0;
   6 var htmlStr=""
   7 htmlStr += "<html>";
   8 htmlStr += "<head>";
   9 htmlStr += "<script>";
  10 htmlStr += "function show(idVal){";
  11 htmlStr += "    var val = \"<table border='1'>\" + document.getElementById(idVal).value + \"</table>\";";
  12 htmlStr += "    document.getElementById('displayId').innerHTML = val;";
  13 htmlStr += "document.getElementById('displayId').style.display = \"block\";";
  14 //htmlStr += "alert(idVal);";
  15 //htmlStr += "alert(val);";
  16 htmlStr += "}";
  17 htmlStr += "</script>";
  18 htmlStr += "</head>";
  19 htmlStr += "<div id='displayId' style='display:none'></div>";
  20 htmlStr += "<div>\n<table border='1'>\n";
  21 printObjectValues(jsonObj,level);
  22 htmlStr += "\n</table>\n</div>";
  23 //var pattern = new RegExp("\\n","g");
  24 //htmlstr =htmlStr.replace(pattern,'');
  25 htmlStr += "</html>";
  26 console.log(htmlStr);
  27
  28 function tabs(level){
  29 return '';
  30 }
  31 function tabsOrig(level){
  32         var tabs="";
  33         for(var i=0;i<level;i++){
  34                 tabs += "\t";
  35         }
  36         return tabs;
  37 }
  38
  39 function printObjectValues(jsonObj,level){
  40 var output="";
  41 var objectHtmlStr="";
  42 try{
  43 for (var key in jsonObj) {
  44 //console.log(key +":" + jsonObj.hasOwnProperty(key));
  45   if (jsonObj.hasOwnProperty(key)) {
  46         var v = jsonObj[key];
  47         if(typeof v === 'object' && Array.isArray(v) === false){
  48                 var idVal = objectId++;
  49                 level++;
  50                 objectHtmlStr += tabs(level) + "<div>\n" ;
  51                 objectHtmlStr += tabs(level+1 ) +"<table border='1'>\n" ;
  52
  53                 var str=printObjectValues(v,level+2);
  54                 if(str != null && str != ''){
  55                         htmlStr += tabs(level+2) + objectHtmlStr + "<tr><td style='background-color:green'><a href=\"javascript:show('obj_" + idVal + "')\">" + key + "</a>\n";
  56                         htmlStr +="<input id='obj_" + idVal + "' type='hidden' value='" + str.trim() + "'>\n";
  57                 }
  58
  59                 htmlStr += tabs(level+1) + "</table>\n" ;
  60                 htmlStr += tabs(level) + "</div>\n";
  61         }else if(typeof v === 'object' && Array.isArray(v) === true){
  62                 var idVal = objectId++;
  63                 level++;
  64                 objectHtmlStr += tabs(level) + "<div>\n";
  65                 objectHtmlStr += tabs(level+1) + "<table border='1'>\n";
  66
  67                 var str = printArrayValues(v,key,level+2);
  68                 if(str != null && str != ''){
  69                         htmlStr += tabs(level+2) + objectHtmlStr + "<tr><td style='background-color:blue'><a href=\"javascript:show('obj_" + idVal + "')\">" + key + "</a>\n";
  70                 htmlStr+="<input id='obj_" + objectId + "' type='hidden' value='" +  str.trim() + "'>\n";
  71                 }
  72
  73                 htmlStr += tabs(level+1) + "</table>\n" ;
  74                 htmlStr += tabs(level) + "</div>\n";
  75         }else{
  76                 output += tabs(level) +"<tr><td>" + key + "</td><td>" + printValue(v) + "</td></tr>\n";
  77         }
  78   }
  79 }
  80 }catch(err){
  81         console.log(err);
  82 }
  83 return output;
  84 }
  85
  86 }catch(err){
  87 console.log( err );
  88 }
  89
  90 function printArrayValues(arrObj,key,level){
  91 var output ="";
  92 var arrayHtmlStr ="";
  93 try{
  94         for(var i=0;arrObj != null && i<arrObj.length;i++){
  95                 var o=arrObj[i];
  96                 if(typeof o === 'object' && Array.isArray(o) === false){
  97                         var idVal = objectId++;
  98                         level++;
  99                         arrayHtmlStr += tabs(level) + "<div>\n" ;
 100                         arrayHtmlStr += tabs(level+1 ) +"<table border='1'>\n" ;
 101
 102                         var str = printObjectValues(o,level+2);
 103                         if(str != null && str != ''){
 104                                 htmlStr += tabs(level+2 ) + arrayHtmlStr + "<tr><td><a href=\"javascript:show('obj_" + idVal + "')\">" +key + "[" + i + "]"  + "</a>\n";
 105                                 htmlStr+="<input id='obj_" + idVal + "' type='hidden' value='" +str.trim() + "'>\n";
 106                         }
 107                         htmlStr += tabs(level+1) + "</table>\n";
 108                         htmlStr += tabs(level) + "</div>\n";
 109                 }else if(typeof o === 'object' && Array.isArray(v) === true){
 110                         var idVal = objectId++;
 111                         level++;
 112                         arrayHtmlStr += tabs(level) + "<div>\n" ;
 113                         arrayHtmlStr += tabs(level+1 ) +"<table border='1'>\n" ;
 114
 115                         var str = printArrayValues(o,key,level);
 116                         if(str != null && str != ''){
 117                                 htmlStr += tabs(level+2 ) + arrayHtmlStr + "<tr><td><a href=\"javascript:show('obj_" + idVal + "')\">Array</a>\n";
 118                                 htmlStr+="<input id='obj_" + idVal + "' type='hidden' value='" +str.trim() + "'>\n";
 119                         }
 120
 121                         htmlStr += tabs(level+1) + "</table>\n";
 122                         htmlStr += tabs(level) + "</div>\n";
 123                 }else{
 124                         output += tabs(level) + "<tr><td>" + printValue(o) + "</td></tr>\n";
 125                 }
 126         }
 127 }catch(err){
 128         console.log(err);
 129 }
 130 return output;
 131 }
 132
 133 function printValue(obj){
 134         if(obj != undefined){
 135                 return obj;
 136         }else{
 137                 return "";
 138         }
 139 }