Link to home
Create AccountLog in
Avatar of gdpotter
gdpotter

asked on

Turn jQuery Object into nested UL

Hello experts.  I'm working on a JavaScript/jQuery project right now, and I'm drawing a bit of a blank.  Basically I need to turn a JavaScript object into a nested ul.  I know how to do it without nesting, but the possibility for unlimited children is throwing me off.  I don't know how to accomplish it without having an infinite number of inner loops.  Regardless, here's some sample JavaScript code:
var list = [
    {
        image : null,
        text : 'list item 1',
        id : 'item 1'
    },
    {
        image : '../images/icon2.gif',
        text : 'list item 2',
        id : 'item 2'
    },
    {
        image : null,
        text : 'list item 3',
        id : 'item 3',
        children : [
            {
                image : '../images/icon5.gif',
                text : 'list item 3.1',
                id : 'item 3.1'
            },
            {
                image : '../images/icon5.gif',
                text : 'list item 3.2',
                id : 'item 3.2'
            },
            {
                image : null,
                text : 'list item 3.3.3',
                id : 'item 3.3.3',
                children : [
                {
                    image : '../images/icon1.gif',
                    text : 'list item 3.3.1',
                    id : 'item 3.3.1'
                },
                {
                    image : '../images/icon7.gif',
                    text : 'list item 3.3.2',
                    id : 'item 3.3.2'
                },
                {
                    image : null,
                    text : 'list item 3.3.3',
                    id : 'item 3.3.3'
                ]
            }
        ]
    }
]

Open in new window

which should turn into:
<ul>
    <li id='item 1'><span>list item 1</span></li>
    <li id='item 2'><img src='../images/icon2.gif' /><span> list item 2</span></li>
    <li id='item 3'><span>list item 3</span>
        <ul>
            <li id='item 3.1'><img src='../images/icon5.gif'><span>list item 3.1</span></li>
...

Open in new window

I'm not looking for full source code, just something to get me going into the right direction.  Saving time with jQuery would be a plus, because the rest of the project already uses it.  Thanks!
ASKER CERTIFIED SOLUTION
Avatar of Proculopsis
Proculopsis

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of gdpotter
gdpotter

ASKER

Thank you very much.  This is exactly what I was looking for.  Recursion was the missing piece of my puzzle.