在保持代码正常工作的同时将 xml 转换为 json

Question

我有一个 xml 文件和一个与之关联的 html 文件。 html 文件采用 xml 元素并输出包含每个节点类型的超链接和图片的树。我怎样才能将代码转换为适用于 JSON 而不是 XML。这是代码和 xml

我向 attr 元素添加了一个函数，所以当我点击它时它会打开一个 table:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script type="text/javascript">
        $(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 && typeof(o[i])=="object") {
                    if(o[i].__text){ 
                        var ul = $("<ul>").appendTo(node)
                        var node=$('<li>').appendTo(ul)
                        if(o[i]._href){
                           var n = $("<span>").appendTo(node)
                            $(n).text(o[i].__text).attr("href", o[i]._href)
                    }
                        else{
                            $(node).text(o[i].__text)
                        }
                    if(o[i]._attr){

                            var n = $("<span>").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 = $("<ul>").appendTo(node)
                    if(o[i].__text){
                        var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
                        if(o[i]._href){
                            var n = $("<span>").appendTo(node)
                            $(n).text(o[i].__text).attr("href", o[i]._href)
                        }

                    }else{
                            $('<li>' + o[i] + '</li>').appendTo(ul)
                    }


                }
            }
        }
    </script>
    <style type="text/css">
    #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;
    }
  </style>
    <title>treeView</title>
  </head>

  <body>
    <div id="treeView">
    </div>
</body> 

</html>

这里又是 json 文件。只添加了 1 行来测试属性：

{
    "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"
    }
}

Answer 1

我试过编写解析器，希望对您有所帮助。

Json，与您发布的文件相同

完整的Javascript代码，

        <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: "test.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")
                    continue;
                if (o[i] !== null && typeof(o[i])=="object") {
                    if(o[i].__text){ 
                        var ul = $("<ul>").appendTo(node)
                        var node=$('<li>').appendTo(ul)
                        if(o[i]._href){
                            var n = $("<span>").appendTo(node)
                            $(n).text(o[i].__text).attr("href", o[i]._href)
                        }else{
                            $(node).text(o[i].__text)
                        }
                    }
                    traverse(node,o[i]);
                }
                else{
                    var ul = $("<ul>").appendTo(node)
                    if(o[i].__text){
                        var li = $('<li>' + o[i].__text + '<\/li>').appendTo(ul)
                        if(o[i]._href){
                            var n = $("<span>").appendTo(node)
                            $(n).text(o[i].__text).attr("href", o[i]._href)
                        }
                    }else{
                            $('<li>' + o[i] + '</li>').appendTo(ul)
                    }
                }
            }
        }
    </script>

此外，我已将 treeView 无序列表更改为 div。

<body>
    <div id="treeView">
    </div>
</body>

[编辑]

function traverse(data) {    
    if (typeof(data) == 'object') {        
        var ul = $('<ul>');
        for (var i in data) {
            if(i == "__text" || i == "_href" || i == "_attr")
                continue;
            if(data[i].__text){
                ul.append($('<li>').text(data[i].__text).append(traverse(data[i])));         
            }
            else{
                ul.append(traverse(data[i]));
            }
        }        
        return ul;
    } else {       
        var textNode = $('<li>').text(data);
        return textNode;
    }
}

也改

traverse($('#treeView'), tree)

至

$('#treeView').append(traverse(tree))

在 ajax 成功函数中。我还没有处理 attr 和 http。可以像上一个函数一样添加。

在保持代码正常工作的同时将 xml 转换为 json

convert xml to json while keeping code working

html

xml

tree

json

converter