title: convert xml to json while keeping code working
body: <p>I have a xml file, and an html file associated with it. 
  the html file takes the xml elements and outputs a tree with hyperlinks and pictures for each node type included. how can I convert the code to work for JSON instead of XML. this is the code and the xml</p>
  
  <p>I added a function to attr elements so it opens a table when I click on it:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $.ajax({
                  url: "converted14.json",
                  dataType: 'json',
                  success: function(tree) {
                      traverse($('#treeView'), tree)
                      $('#treeView li:has(li)').addClass("Max").click(function(e) {
                              $(this).toggleClass("Max Min");
                              $(this).children("ul").toggle();
                              e.stopPropagation();
                      })
  
                      $("[href]").addClass("Blue").click(function(e){
                          $(this).toggleClass("Purple");
                          e.stopPropagation();
                          window.location.href = $(this).attr("href")
                      })
                      $('#treeView li').click(function(g) {
                          var mytree2 = $(this);
                          mytree2.children('li').toggle();
                          g.stopPropagation();
                      })
                  }
              })
          });
          function traverse(node, o) {
              for (var i in o) {
                  if(i == "__text" || i == "_href" || i == "_attr")
                      continue;
                  if (o[i] !== null &amp;&amp; typeof(o[i])=="object") {
                      if(o[i].__text){ 
                          var ul = $("&lt;ul&gt;").appendTo(node)
                          var node=$('&lt;li&gt;').appendTo(ul)
                          if(o[i]._href){
                             var n = $("&lt;span&gt;").appendTo(node)
                              $(n).text(o[i].__text).attr("href", o[i]._href)
                      }
                          else{
                              $(node).text(o[i].__text)
                          }
                      if(o[i]._attr){
  
                              var n = $("&lt;span&gt;").appendTo(node)
                              $(n).text(o[i]._attr)
                              $(n).hide()
                              $(n).parent().click(function(g){
                              $(n).toggle().addClass("Table")
                              })
  
                      }
                      }
                      traverse(node,o[i]);
                  }
                  else{
                      var ul = $("&lt;ul&gt;").appendTo(node)
                      if(o[i].__text){
                          var li = $('&lt;li&gt;' + o[i].__text + '&lt;\/li&gt;').appendTo(ul)
                          if(o[i]._href){
                              var n = $("&lt;span&gt;").appendTo(node)
                              $(n).text(o[i].__text).attr("href", o[i]._href)
                          }
  
                      }else{
                              $('&lt;li&gt;' + o[i] + '&lt;/li&gt;').appendTo(ul)
                      }
  
  
                  }
              }
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
      #treeView li {
        list-style: none;
      }
  
      #treeView ul {
        padding-left: 1em;
      }
  
      #treeView b {
        padding-right: 1em;
      }
  
      .Min {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
        padding-left: 15px;
      }
  
      .Blue {
      text-decoration: underline;
        color: Blue;
      }
      .Purple {
      text-decoration: underline;
        color: Purple;
      }
  
      .Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
        padding-left: 15px;
      }
  
      li {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
        padding-left: 15px;
      }
  
      .Table {
  
      background-color : yellow;
      border: 1px solid black;
      border-collapse: collapse;
      width: 300px;
      height: 100px;    
      padding: 50px;
      box-sizing: border-box;
      position: absolute;
      right: 100px;
      top: 50px;
      }
  
      .MainStation.Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .Substation.Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .ControlExpandable.Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .PushButtonExpandable.Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .Control {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .PushButton {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
      .ElectricStation.Max {
        background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
        background-size: 15px 15px;
        cursor: pointer;
        padding-left: 15px;
      }
    &lt;/style&gt;
      &lt;title&gt;treeView&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="treeView"&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and heres the json file again. only 1 line added to test the attr:</p>
  
  <pre><code>{
      "MAIN": {
          "MainStation": [
              {
                  "Substation": [
                      {
                          "Control": "Control1\n",
                          "ControlExpandable": {
                              "MiniControl": [
                                  "MiniControl1",
                                  "MiniControl2"
                              ],
                              "__text": "Control2"
  
                          },
                          "PushButton": {
  
                              "__text": "PushButton1",
                              "_attr": "success\nDate:17july"
                          },
                          "_href": "http://google.com",
                          "__text": " Substation1\n\n\n\n\n\n\n"
                      },
                      {
                          "ControlExpandable": {
                              "MiniControl": [
                                  "MiniControl1",
                                  "MiniControl2"
                              ],
                              "__text": "Control1"
                          },
                          "Control": "Control2",
                          "PushButton": "PushButton1",
                          "__text": " Substation2\n\n\n\n\n\n\n"
                      },
                      {
                          "Control": [
                              "Control1",
                              "Control2",
                              "Control3",
                              "Control4"
                          ],
                          "__text": " Substation3\n\n\n\n\n\n\n\n\n"
                      },
                      {
                          "PushButton": [
                              "PushButton1",
                              "PushButton2"
                          ],
                          "__text": " Substation4\n\n\n\n\n"
                      }
                  ],
                  "__text": " Mainstation1\n\n\n\n\n\n\n\n\n"
              },
              {
                  "Substation": [
                      {
                          "Control": [
                              "Control1",
                              "Control2"
                          ],
                          "PushButton": "PushButton1",
                          "__text": " Substation1\n\n\n\n\n\n\n"
                      },
                      {
                          "ControlExpandable": {
                              "MiniControl": [
                                  "MiniControl1",
                                  "MiniControl2"
                              ],
                              "__text": "Control1"
                          },
                          "Control": "Control2",
                          "PushButtonExpandable": {
                              "MiniPushButton": [
                                  "MiniPushButton1",
                                  "MiniPushButton2"
                              ],
                              "__text": "PushButton1"
                          },
                          "__text": " Substation2\n\n\n\n\n\n\n"
                      }
                  ],
                  "__text": " Mainstation2\n\n\n\n\n"
              }
          ],
          "ElectricStation": {
              "Substation": [
                  {
                      "Control": [
                          "Control1",
                          "Control2"
                      ],
                      "PushButton": "PushButton1",
                      "__text": " Substation1\n\n\n\n\n\n\n"
                  },
                  {
                      "ControlExpandable": {
                          "MiniControl": [
                              "MiniControl1",
                              "MiniControl2"
                          ],
                          "__text": "Control1"
                      },
                      "Control": "Control2",
                      "PushButtonExpandable": {
                          "MiniPushButton": [
                              "MiniPushButton1",
                              "MiniPushButton2"
                          ],
                          "__text": "PushButton1"
                      },
                      "__text": " Substation2\n\n\n\n\n\n\n"
                  }
              ],
              "__text": " ElectricStation1\n\n\n\n\n"
          },
          "__text": " MAIN\n\n\n\n\n\n\n"
      }
  }
  </code></pre>