Question

我有一个ASP.NET MVC 4应用程序，其中包含完整名称空间的类列表绑定到列表框。这会生成HTML，如下所示：

<select id="myclasses">
  <option>Api.Domain.Interfaces.MyClass1</option>
  <option>Api.Domain.Interfaces.MyClass2</option>
  <option>Api.Domain.Interfaces.MyClass3</option>
  <option>Api.Domain.Models.MyModel1</option>
  <option>Api.Domain.Models.MyModel2</option>
  <option>Api.Infrastructure.Repositories.MyRepo1</option>
  <option>Api.Infrastructure.Repositories.MyRepo2</option>
</select>

我想使用JavaScript / jQuery生成存储在变量中的此HTML的JSON表示，如下所示：

var classes = 
[{ "text": "Api", "children": 
    [{ "text": "Domain", "children": 
        [{ "text": "Interfaces", "children": 
            [{ "text": "MyClass1" }, { "text": "MyClass2" }, { "text": "MyClass3" }]
         },
         { "text": "Models", "children": 
           [{ "text": "MyModel1" }, { "text": "MyModel2" }] 
        }]
    },
    { "text": "Infrastructure", "children": 
       [{ "text": "Repositories", "children": 
           [{ "text": "MyRepo1" }, { "text": "MyRepo2" }] 
       }]
    }]
}];

完全限定的类名已经处于树状结构中，所以我认为应该有一种相当简单的方法来实现我想要做的事情。我应该使用$("#myclasses").html()获取元素的内部HTML然后执行字符串操作，还是有更简单的方法？

Answer 1

这是Jquery的尝试，尽管你将为最后一个元素提供一个空的子列表。如果这是一个问题，可以修改。我还添加了多项选择以进行拍摄。

http://jsfiddle.net/c8e7kkhh/1/

$(function() {
    $("#button").click(function(){
        var output = [];
        var input = $( "#myclasses option:selected" );

        for (var i = 0; i < input.length; i++) {
            var chain = input[i].text.split(".");

            var currentNode = output;
            for (var j = 0; j < chain.length; j++) {
                var wantedNode = chain[j];
                var lastNode = currentNode;
                for (var k = 0; k < currentNode.length; k++) {
                    if (currentNode[k].text == wantedNode) {
                        currentNode = currentNode[k].children;
                        break;
                    }
                }
                // If we couldn't find an item in this list of children
                // that has the right name, create one:
                if (lastNode == currentNode) {
                    var newNode = currentNode[k] = {text: wantedNode, children:[]};
                    currentNode = newNode.children;
                }
            }
        }

        $("#result").html(JSON.stringify(output));
    });
});

将HTML中的全名类列表转换为JSON

1 个答案: