i have to display my list from the parentId , every child have a parent Id ,

<ul>
        <li>Maths</li>
        <ul>
            <li>Topologie</li>
            <li>Algèbre</li>
            <ul>
                <li>Algèbre linéaire</li>
                <li>Arithmétique</li>
                <ul>
                    <li>Thérorème de Bézout</li>
                </ul>
            </ul>
        </ul>
        <li>Informatique</li>
        <ul>
            <li>C-C++</li>
            <ul>
                <li>Les pointeurs</li>
            </ul>
        </ul>
    </ul>

My data are saved in a table with the following informations : id ,name , parent Id .

Can someone help me to write a function in javascript to outpout a html code using the data of the table ?

i have to display my list from the parentId , every child have a parent Id ,

<ul>
        <li>Maths</li>
        <ul>
            <li>Topologie</li>
            <li>Algèbre</li>
            <ul>
                <li>Algèbre linéaire</li>
                <li>Arithmétique</li>
                <ul>
                    <li>Thérorème de Bézout</li>
                </ul>
            </ul>
        </ul>
        <li>Informatique</li>
        <ul>
            <li>C-C++</li>
            <ul>
                <li>Les pointeurs</li>
            </ul>
        </ul>
    </ul>

My data are saved in a table with the following informations : id ,name , parent Id .

Can someone help me to write a function in javascript to outpout a html code using the data of the table ?

• javascript
• list
• dynamic
• load

• My data looks like this : id : 1 ,name :"Maths" , parentid :0 ; id : 2 ,name :"Topologie" , parentid :1 ; id : 3 ,name :"Algébre" , parentid :1 ; id : 4 ,name :"Algébre linéaire" , parentid :3; id : 5 ,name :"Arithmétique" , parentid :3 ; id : 6 ,name :"Théoréme de Bézout" , parentid :5 ; id : 7 ,name :"Informatique" , parentid :0 ; id : 8 ,name :"c-c++" , parentid :7 ; id : 9 ,name :"Les pointeurs" , parentid :8 ; – DocMoo Commented Aug 12, 2013 at 10:28

2 Answers 2

Using data from the question you posted yesterday (converted to JavaScript), you can create a DOM Tree of the nodes you want like this (assuming all parent nodes are listed before their children)

function generateList(data) {
    var i, item, ref = {}, counts = {};
    function ul() {return document.createElement('ul');}
    function li(text) {
        var e = document.createElement('li');
        e.appendChild(document.createTextNode(text));
        return e;
    }
    ref[0] = ul();
    counts[0] = 1;
    for (i = 0; i < data.length; ++i) {
        ref[data[i].parentId].appendChild(li(data[i]['name'])); // create <li>
        ref[data[i].id] = ul(); // assume + create <ul>
        ref[data[i].parentId].appendChild(ref[data[i].id]);
        counts[data[i].id] = 0;
        counts[data[i].parentId] += 1;
    }
    for (i in counts) // for every <ul>
        if (counts[i] === 0) // if it never had anything appened to it
            ref[i].parentNode.removeChild(ref[i]); // remove it
    return ref[0];
}

var data = [
    {'id': 1, 'parentId': 0, 'name': 'Maths'},
    {'id': 2, 'parentId': 1, 'name': 'Topologie'},
    {'id': 3, 'parentId': 1, 'name': 'Algèbre'},
    {'id': 4, 'parentId': 3, 'name': 'Algèbre linéaire'},
    {'id': 5, 'parentId': 3, 'name': 'Arithmétique'},
    {'id': 6, 'parentId': 5, 'name': 'Thérorème de Bézout'},
    {'id': 7, 'parentId': 0, 'name': 'Informatique'},
    {'id': 8, 'parentId': 7, 'name': 'C-C++'},
    {'id': 9, 'parentId': 8, 'name': 'Les pointeurs'}
];

Finally, using it

generateList(data);

try this jQuery plugin ('jquery.tmpl.js'): [http://www.borismoore./2010/10/jquery-templates-is-now-official-jquery.html]