title: How to print a complex nested JSON object in html using correct indentation?
body: <p><strong>index.html</strong></p>
  
  <ol>
  <li>How to print a complex json object on html page?</li>
  <li>It should look like a json object with proper indentation</li>
  <li>I should be able to change the json KEY only and save it back.</li>
  </ol>
  
  <p><em>NOTE: I can't use json.stringify as i want a kind of JOSN editor where I should change the key only not value and save it back.</em> </p>
  
  <blockquote>
  <pre><code>  p{
      padding: 0;
      margin: 0;   } 
  .indentLeft20{padding-left: 20px;} 
  .indentLeft40{padding-left: 40px;} 
  .indentLeft60{padding-left: 60px;} 
  .indentLeft80{padding-left: 80px;} 
  .indentLeft100{padding-left: 100px;} 
  &lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  </blockquote>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>export default function editorGenerator() {
  
      const root = document.getElementById('root');
  
      var data = {
          "prodname": "My product",
          "type": "medium",
          "color": "red",
  
  
          num: [1,2,3],
          "area": {
              "height": 2,
              "width": 3,
              "length": 4
          },
  
          "feature": {
              "featureArray": [{
                      "title": "title1",
                      "available": true
                  },
                  {
                      "title": "title2'",
                      "available": true
                  },
                  {
                      "title": "title3",
                      "available": false
                  }
              ]
          }
      };
  
      editor( data );
  
  }
  
   var indent = 20;  //to add padding for indentation
  
  
   var myeditor = document.createElement("DIV");
  
   let editor = function self(obj, editor){
  
      for(var key in obj){
          if(typeof obj[key] === 'object' &amp;&amp; !Array.isArray(obj[key])){
  
  
              var line = document.createElement("DIV");
  
              var txtdata = document.createElement("H6"); 
              var textnode = document.createTextNode(key+"(Object)");         
              txtdata.appendChild(textnode);  
              line.appendChild(txtdata);   
              myeditor.appendChild(line); 
  
              var att = document.createAttribute("class");       
              att.value = "indentLeft"+indent;                           
              line.setAttributeNode(att);  
  
              indent = indent+20;
              self( obj[key]);  
  
  
          }
          if(Array.isArray(obj[key])){
              indent = indent+20;
  
              var line = document.createElement("DIV");
  
              var txtdata = document.createElement("H6"); 
              var textnode = document.createTextNode(key+"(Array)");         
              txtdata.appendChild(textnode);  
              line.appendChild(txtdata);   
              myeditor.appendChild(line); 
  
              var att = document.createAttribute("class");       
              att.value = "indentLeft"+indent;  
              line.setAttributeNode(att);  
  
  
              obj[key].forEach( (item)=&gt;{
                  if(typeof item !== 'object'){
                      var line = document.createElement("DIV");
  
                      var txtdata = document.createElement("p"); 
                      var textnode = document.createTextNode(item);         
                      txtdata.appendChild(textnode);  
                      line.appendChild(txtdata);   
                      myeditor.appendChild(line);   
                  }
  
              })
  
          }
          if(typeof obj[key] === 'string' || typeof obj[key] === 'number' || typeof obj[key] === 'boolean'){
              var line = document.createElement("DIV");                 
              var txtdata = document.createElement("P"); 
  
              console.log(key+' :: '+obj[key] );               
  
              var textnode = document.createTextNode(obj[key]);         
  
              txtdata.appendChild(textnode);  
              line.appendChild(txtdata);   
              myeditor.appendChild(line); 
  
              var att = document.createAttribute("class");      
              att.value = "indentLeft"+indent;                        
              line.setAttributeNode(att);   
          }
          if( Array.isArray(obj[key]) ){
              obj[key].forEach(item =&gt; {
                  self( item );    
              });
          }
  
      }
  
   }
  
   root.appendChild(myeditor);
  </code></pre>
  
  <blockquote>
    <p>i have to print nested JSON object on HTML page. JSON object format differ always, it is not fix. It can be very complex object. I have to print it with right indentation. Also I have to wrap the object and arrays inside the bracket so that it should look like a object on the page. I have to use DIV or UL > LI tag combination. </p>
  </blockquote>