дерево разбора javascript

Question

я пишу плагин в jquery, чтобы быть файловым менеджером я строю структуру папок в php, я вызываю этот php файл с помощью ajax и возвращаю что-то вроде этого

{"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'));

Этот вид рабочего процесса отлично подходит для действительно динамичных сайтов