javascript parse tree

Question

i'm writing a plugin in jquery to be a file manager i build my folder structure in php i call that php file using ajax and i return something like this

{"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":[]}}

how can i parse the info using jquery or javascript to do something like this

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

katspaugh · Accepted Answer · 2011-07-11 20:30:39Z

2

Create a function which does that: 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("&nbsp;") +
                key +
                "<br>"
            );

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

list(obj, 0);

edited Jul 11, 2011 at 20:30

katspaugh

18k12 gold badges69 silver badges107 bronze badges

answered Jul 11, 2011 at 19:44

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

z3phir Over a year ago

thanks works great now i need to understand how to use this to build something like <ul><li class="haschildern">value<ul><li class="haschildren">value<ul><li>value</li></ul></li></ul></li></ul>

Marek Marczak Over a year ago

Good for relatively small objects with few nested data.

user578895 · Accepted Answer · 2011-07-11 19:43:59Z

1

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 is from jQuery. If you don't want to use jQuery, it's equivalent to: {}.toString.call( obj[key] ) === '[object Object]'

answered Jul 11, 2011 at 19:43

user578895

1 Comment

z3phir Over a year ago

i tried your code but i got only the first set of keys no children

John David Five · Accepted Answer · 2011-07-11 20:01:16Z

0

I would also look into using jQuery with jQuery tmpl and tmpl.plus. You could then create a recursive template to render. There is a bit of a learning curve but man does it really separate markup away from your logic ect. jQuery tmpl

If the recursion is done right, it could be as easy as calling:

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

This kind of workflow is great for really dynamic sites

answered Jul 11, 2011 at 20:01

John David Five

83111 silver badges15 bronze badges

1 Comment

z3phir Over a year ago

i come only with a php background i'm a newborn to javascript or jquery for now i think i will work with raw data but i will take a look thanks for your suggestion

Collectives™ on Stack Overflow

javascript parse tree

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related