Question

I have the following code:

    $(document).ready(function() {
        var ul = $("<div>");
        ul.addClass("menu").appendTo('.menuwrapper');
    });
    function loop(obj, ul) {
        $.each(obj, function(key, val) {
            if($.isPlainObject(val)) { // object, call recursively

                //if depth = 1 then { } else { }
                var ul2 = $("<ul>").addClass('hide').appendTo(
                    $("<div>").append(key).appendTo(ul)
                );


                loop(val, ul2);
            } else {
                $("<li>", {
                    class: 'innerli'
                }).text(val).appendTo(ul);
            }
        });
    }

    $.getJSON('test.json', function(data) {
        var ul = $(".menu");
        loop(data, ul);
    });

Sample of test.json:

{"Dashboard":{"Submenu1":"Submenu1","Submenu2":"Submenu2"},"About us":"About us","Services":{"Service1":"Service1","Service2":"Service2"}}

I want to add a condition to the loop that says that if this is the x level of the object then do ‘something’ (I’ve added a comment in the code to the part I’m talking about).

Answer 1

 function loop(obj, ul,depth) {
    $.each(obj, function(key, val) {
        if($.isPlainObject(val)) { // object, call recursively

            //if depth = 1 then { } else { }
            var ul2 = $("<ul>").addClass('hide').appendTo(
                $("<div>").append(key).appendTo(ul)
            );


            loop(val, ul2,(depth+1));
        } else {
            $("<li>", {
                class: 'innerli'
            }).text(val).appendTo(ul);
        }
    });
}


 $.getJSON('test.json', function(data) {
    var ul = $(".menu");
    loop(data, ul, 0);
});

this should tell you your depth on each recursion level.