Iterating through a nested number-keyed json object

Question

This might be a duplicate, but I've not yet found a solution to my problem, even though I've checked multitudes of other examples of JSON recursive traversion functions.

My json obj looks sort of like the following:

var obj = 
{
    "description": [
    {
        "list": [
            {
                "1": "here is text"
            },
            {
                "2": "other text"
            },
            {
                "3": "arbitrary text"
            },
            {
                "4": [
                    {
                        "1": "indented"
                    },
                    {
                        "2": {
                            "1": "indented to second level"
                        }
                    },
                    {
                        "3": "first indentation level again"
                    },
                    {
                        "4": {
                            "1": "second level again"
                        }
                    },
                    {
                        "5": "and first level, to wrap things up"
                    }
                ]
            }
        ]
    }
]
};

Traversing this with something like:

function recurTrav (jsonObj) {
    $.each(jsonObj.description[0], function (key, value) {

        $(".testul").append("<li class=" + key + ">" + value + "</li>");

        if (typeof(jsonObj[key] == "object")) {
            recurTrav(jsonObj[key]);
        }
    });
}
recurTrav(obj);

Gives me nothing. (Note that this was just to test how I would traverse. I'm stuck, and it's embarrassing.

I guess I would just need a push in the right direction...

What I'm actually looking to do is creating this into a unordered list structure. Where there can be uls inside the main ul.

<ul>
    <li>here is text</li>
    <li>other text</li>
    <li>arbitrary text</li>
    <li>
        <ul>
            <li>indented</li>
            <li>
                <ul>
                    <li>indented to second level</li>
                </ul>
            </li>
            <li>first indentation level again</li>
            <li>
                <ul>
                    <li>second level again</li>
                </ul>
            </li>
            <li>and first level, to wrap things up</li>
        </ul>
    </li>
</ul>

Answer 1

I'd handle it slightly differently. First, I'd make recurTrav() return DOM tree. In the simpliest case it would be just flat <ul></ul>. If it encounters nested list it wraps result for inner recursion in <li></li>.

So...

function recurTrav(jsonObj) {
    var cont = $('<ul/>');

    $.each(jsonObj, function (key, value) {
        var el = $('<li/>');

        if (typeof(jsonObj[key]) == "object") {
            el.append(recurTrav(value));
        } else {
            el.attr('class', key);
            el.html(value);
        }

        cont.append(el);
    });

    return cont;
}

var dom = recurTrav(jsonObj.description[0].list);