Problème pour Transformer une fonction récursive PHP en jQuery :(

Bonjour,

Je viens demander votre aide car je n'arrive pas à transformer ma fonction PHP en jQuery.

J'ai une fonction PHP qui me renvoie un array contenant l'arborescence d'un dossier que j'encode en Json et le récupère en ajax.
Puis j'ai une seconde fonction qui affiche l'arborescence en PHP mais je souhaiterais la supprimer et le faire en jQuery

voici le code PHP : <u></u>
<u></u>

<u>fonction qui affiche l'arborescence : (LA FONCTION QUE JE SOUHAITE TRANSFORMER)</u>

/**
* Function treeToHtml
*
* Permet d'afficher en liste l'arborescence d'un répertoire
* @param array $array tableau contenant les dossier et fichier d'un répertoir
* @return void 
**/
function treeToHtml($array){
    foreach($array as $key => $value)
    {
        if(is_array($value))
        {
            echo $key.' :<ul>';
            $this->treeToHtml($value);
            echo '</ul><br />';
        }
        else
        {
            echo '<li id="'.$value.'"><a href="'.$value.'">'.$value.'</a></li>';
        }
    }
}

<u>Json récupéré en ajax :</u>

{
    "aaaa.txt":"..\/treeTest\/aaaa.txt",
    "dosier3":{
         "sous-dossier3":{
               "texte3-1.txt":"..\/treeTest\/dosier3\/sous-dossier3\/texte3-1.txt"
          },
         "texte31.txt":"..\/treeTest\/dosier3\/texte31.txt"
    },
    "dossier1":{
         "dossier1-1":]
    },
    "Dossier2":{
         "texte21":"..\/treeTest\/Dossier2\/texte21","texte22.txt":"..\/treeTest\/Dossier2\/texte22.txt"
     },
    "dsfghjkl.txt":"..\/treeTest\/dsfghjkl.txt"
}

<u>Ma fonction jQuery que j'essaye de faire :) : (je n'est pas réussi a transformer la fonction PHP donc j'ai rajouter une variable id pour connaitre l'identifiant ou l'on ajoute le code)</u>

/**
* Function treeToHtml
* Permet de positionner les différents dossier et fichier retourner par le php dans une liste
* @param array tableau contenant les dossier et fichier d'un dossier
* @param id identifiant html du dossier ou l'on doit inséré les nouveaux éléments
* @return void
**/
function treeToHtml(array,id){

  $.each(array,function(key, value)
  { 
    console.log(key + ': ' + value); 
        /* si value est un tableau (dossier) */
    if (typeof(value) === 'object') {
          /* ajoute une balise <li>, <a> et <ul> */
      $('#tree_'+ id).append( $('<li>').attr('id', 'tree_'+ key)
                            .append( $('<a>').attr('href','#').html(key) )
                            .append( '<ul>' )
      );
          /* ajoute dans la balise <ul> la récursiviter de la fonction */
      $('#tree_'+ id + 'ul').append(treeToHtml(value,key));
    }else{
           /* 
               si id correspond au dossier de départ que l'on souhaite afficher l'arborescence 
               'test' va être remplacer par une variable (ceci a été fait pour tester la fonction)
           */
      if (id == 'test') 
      {
            /* On insère une balise <li> et une balise <a> */
        $('#tree_'+ id).append($('<li>').attr('id','tree_' + key).append($('<a>').attr('href',value).html(key)));
      }else
      {
  /* On insère une balise <li> et une balise <a> dans la balise <ul> correspondant a l'identifiant du dossier passer en parametre */
        $('#tree_'+ id +' ul').append($('<li>').attr('id','tree_' + key).append($('<a>').attr('href',value).html(key)));
      }

    }
  });
}

<u>Avec cette fonction j’obtiens ceci :</u>
<u></u>

<li id="tree_dosier3" class="folder ui-draggable ui-droppable open" style="position: relative;">
    <a href="#">dosier3 </a>
    <ul>
            <!-- premier fichier du dossier -->
        <li id="tree_texte31.txt" >
            <a href="../treeTest/dosier3/texte31.txt">texte31.txt</a>
        </li>
    </ul>
        <!-- second dossier -->        
    <li id="tree_sous-dossier3">
        <a href="#">sous-dossier3 </a>
        <ul>
                <!-- premier fichier du sous-dossier -->
            <li id="tree_texte3-1.txt" >
                <a href="../treeTest/dosier3/sous-dossier3/texte3-1.txt">texte3-1.txt</a>
            </li>
                <!-- doublon du premier fichier du dossier -->
            <li id="tree_texte31.txt" >
                <a href="../treeTest/dosier3/texte31.txt">texte31.txt</a>
            </li>
        </ul>
    </li>
</li>

<u>Alors que je souhaiterais faire ceci :</u>

<!-- premier dossier -->  
<li id="tree_dosier3" class="folder ui-draggable ui-droppable" style="position: relative;">
    <a href="#"> dossier3 </a>
            <!-- sous-dossier -->    
    <ul>
        <li id="tree_sous-dossier3" class="folder ui-draggable ui-droppable">
            <a href="#"> tree_sous-dossier3 </a>
            <ul>
                   <!-- fichier du sous-dossier-->
               <li id="tree_texte3-1.txt" class="folder ui-draggable ui-droppable">
                  <a href="#"> texte3-1.txt </a>
               </li>
           </ul>
        </li>
            <!-- fichier du premier dossier-->
        <li id="tree_texte3-1.txt" class="folder ui-draggable ui-droppable">
            <a href="#"> texte3-1.txt </a>
        </li>
    </ul>
</li>

Je sais qu'il y a beaucoup de code a lire :( mais j'ai mi le plus d'information possible pour que vous compreniez au maximum.

Je suis pas un expert de jQuery c'est pourquoi je demande votre aide :.Je n'est pas réussi a trouver la possibilité de faire la récursiviter en jQuery tous en affichant le HTML comme le " echo " en PHP :(

Merci d'avance de votre aide :)