javascript解析树

Question

我正在 jquery 中编写一个插件作为文件管理器 我在 php 中构建我的文件夹结构我使用 ajax 调用该 php 文件并返回类似这样的内容

{"1":[],"css":{"admin":[],"tabs":{"skin1":{"images":[]},"skin10":{"images":[]},"skin11":{"images":[]},"skin12":{"images":[]},"skin2":[],"skin3":{"images":[]},"skin4":{"images":[]},"skin5":{"images":[]},"skin6":{"images":[]},"skin7":{"images":[]},"skin8":{"images":[]},"skin9":{"images":[]}}},"img":{"admin":[],"filemanager":[],"icons":[]},"js":{"libs":[]},"menu":{"img":[]},"walpappere":{"1":[]}}

我如何使用 jquery 或 javascript 解析信息来做这样的事情

var mystring = ''

foreach key (would be 1,css etc)

  mystring += key

  if has children

     mystring += key

     for each children same as above until all structure is parsed

Answer 1

创建一个执行此操作的函数：http://jsfiddle.net/k5BTr/。

var obj = {"1":[],"css":{"admin":[],"tabs":{"skin1":{"images":[]},"skin10":{"images":[]},"skin11":{"images":[]},"skin12":{"images":[]},"skin2":[],"skin3":{"images":[]},"skin4":{"images":[]},"skin5":{"images":[]},"skin6":{"images":[]},"skin7":{"images":[]},"skin8":{"images":[]},"skin9":{"images":[]}}},"img":{"admin":[],"filemanager":[],"icons":[]},"js":{"libs":[]},"menu":{"img":[]},"walpappere":{"1":[]}};

function list(items, level) {
    for (var key in items) { // iterate
        if (items.hasOwnProperty(key)) {
            // write amount of spaces according to level
            // and write name and newline
            document.write(
                (new Array(level + 1)).join(" ") +
                key +
                "<br>"
            );

            // if object, call recursively
            if (items[key] != null && typeof items[key] === "object") {
                list(items[key], level + 1);
            }
        }
    }
}

list(obj, 0);

Answer 2

var obj = {... mess ... };

var myString = (function parseObj(obj, str){
    for(var key in obj){
        str += key;
        $.isPlainObject(obj[key]) && parseObj(obj[key]);
    }

    return str;
})(obj, '');

$.isPlainObject 来自 jQuery。如果不想使用jQuery，就相当于：{}.toString.call( obj[key] ) === '[object Object]'

Answer 3

我还会考虑将 jQuery 与 jQuery tmpl 和 tmpl.plus 一起使用。然后，您可以创建一个递归模板来呈现。有一点学习曲线，但人确实将标记与您的逻辑等分开。 jQuery tmpl

如果递归正确，它可以像调用一样简单：

var data = {"1":[],"css":{"admin":[],"tabs":{"skin1":{"images":[]},"skin10":{"images":[]},"skin11":{"images":[]},"skin12":{"images":[]},"skin2":[],"skin3":{"images":[]},"skin4":{"images":[]},"skin5":{"images":[]},"skin6":{"images":[]},"skin7":{"images":[]},"skin8":{"images":[]},"skin9":{"images":[]}}},"img":{"admin":[],"filemanager":[],"icons":[]},"js":{"libs":[]},"menu":{"img":[]},"walpappere":{"1":[]}};

//create the recursive template
$.template('myFolders'," ====this is the hard part here==== ");

//some javascript to add functionality to each nested list
var postProcess = function(item){
    $(item.nodes[0]).click(function(e){
        console.log("This is the item you clicked",$(this));
    });
};

//create the templates with event handling and append to the body
$.tmpl('myFolders',data, {rendered:postProcess}).appendTo($('body'));

这种工作流程非常适合真正动态的网站