Une aide pour une fonction récursive...

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 18 Juillet 2022.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Bonjour

    Je souhaite traduire automatiquement du JSON en HTML.

    J'ai du mal à mémoriser les tag pères des children.

    Chaque children peut être suivi par une array constituée de clés :

    Code:
       "children" : [
          "tag": "div",
          "class": "class1",
           etc...
          "children" : [
          etc... imbriqués
    
           ]
      ]
    
    
    Voici ma fonction, récursive, qui ne marchera pas, car les éléments fils ne sont pas rattachés à leur père.

    Comment rédiger cette fonction ?

    Merci beaucoup de votre aide.



    Code:
    function jsonHTML(key) {
        switch (key) {
            case "children" :
                Object.keys(key).forEach(function(key2) {
                    switch (key2) {
                        case "tag" :
                            var elem = document.createElement(key[key2]);
                            break;
                        case "text" :
                            var text = document.createTextNode(key[key2]);
                            elem.appendChild(text);
                            break;
                        case "children" :
                            return jsonNTML(key2);
                            break;
                        default :
                            elem.setAttribute(elem, key[key2]);
                            break;
                    }
                });
                return elem;
                break;
            default :
                break;
        }
    }
    
    
    
    
    
    
    
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Peut-être...

    Le return jsonHTML(key2) est remplacé par :

    elem.appendChild( jsonNTML(key2));

    Amicalement.


    Code:
    function jsonHTML(key) {
       switch (key) {
           case "children" :
               Object.keys(key).forEach(function(key2) {
                   switch (key2) {
                       case "tag" :
                           var elem = document.createElement(key[key2]);
                           break;
                       case "text" :
                           var text = document.createTextNode(key[key2]);
                           elem.appendChild(text);
                           break;
                       case "children" :
                           elem.appendChild( jsonNTML(key2));
                           break;
                       default :
                           elem.setAttribute(elem, key[key2]);
                           break;
                   }
               });
               return elem;
               break;
           default :
               break;
       }
    }
    
    
     
  3. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 018
    J'aime reçus:
    133
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
    C'est son cœur de métier au détriment du reste.
    D'autant plus qu'il est en train de réinventer le DOM, en moins bien.
     
  5. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 207
    J'aime reçus:
    365
    HTML:
    <div class="foo"><div class="bar">
    34 bytes

    HTML:
    {"children":{"tag":"div","class":"foo","children":{"tag":"div","class":"bar"}}}
    79 bytes

    Au lieu de passer par du Vue.js, React, Angular (pour ne citer que les plus populaires). Et une DB
    window.indexedDB ou window.localStorage populée avec du REST ou GraphQL.
     
    UsagiYojimbo apprécie ceci.
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Pardon

    Voilà j'ai fait cette fonction qui fonctionne correctement avec deux paramètres.

    Je vais faire la version trois paramètres prochainement.

    Bien amicalement.
     
  7. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Excusez-moi

    Une question d'ordre général ( en Javascript ) :

    Soit une fonction f(x, y) récursive.

    Comment lors du retour ( return ) de la fonction, savoir si c'est la fonction la plus externe ?

    Alimenter une pile en paramètre semble un peu lourd ?

    Merci beaucoup.
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 682
    J'aime reçus:
    39
    Voilà voilà

    Si une array est suivie immédiatement par une array, peut-être y aurait-il lieu de rajouter cette possibilité dans le traitement des arrays;

    Bien à vous.



    Code:
    function __jsonHTML(key, tmp_root) {
        var elem    = null;
        var key3    = null;
        var key4    = null;
        var text_node    = null;
        if(Array.isArray(key)) {
            key.forEach(function(key2, index, tmp_array) {
                if(typeof(key2) == "object") {
                    elem = __jsonHTML(key2, tmp_root);
                }
            });
        } else if(typeof(key) == "object") {
            Object.keys(key).forEach(function(key2) {
                key3 = key[key2];
                    switch (key2) {
                        case "tag" :
                            elem = document.createElement(key3);
                            break;
                        case "text" :
                            text_node = document.createTextNode(key3);
                            elem.appendChild(text_node);
                            break;
                    case "children" :
                            if(elem != null) {
                                tmp_root.appendChild(elem);
                                __jsonHTML(key3, elem);
                            } else {
                                elem = __jsonHTML(key3, tmp_root);
                            }
                            break;
                        default :
                            elem.setAttribute(key2, key3);
                            break;
                    }
            });
            tmp_root.appendChild(elem);
            return elem;
        }
    }
    
    function jsonHTML(json) {
        var elem = null;
        elem = document.createElement('div');
        elem = __jsonHTML(json, elem);
        return elem.firstChild;
    }
    
    
     
Chargement...
Similar Threads - aide fonction récursive Forum Date
Aide mise à jour script (fonction si nulle ou zero ?) Développement d'un site Web ou d'une appli mobile 26 Mai 2017
Problème indexation avec snapshot html. Fonctionne à moitié. Besoin d'aide !! Problèmes de référencement spécifiques à vos sites 6 Janvier 2015
Besoin d'aide avec les fonctions Développement d'un site Web ou d'une appli mobile 30 Janvier 2013
Aide sur une fonction wordpress (php) Développement d'un site Web ou d'une appli mobile 11 Septembre 2012
[Résolu] besoin aide SVP: redirectpermanent ne fonctionne pas URL Rewriting et .htaccess 25 Juin 2010
Aide sur une fonction php Développement d'un site Web ou d'une appli mobile 10 Juin 2010
Besoin d'aide pour comprendre comment ca fonction Administration d'un site Web 9 Mars 2009
Fonction preg_replace besoin d'aide Développement d'un site Web ou d'une appli mobile 2 Janvier 2008
besoin d'aide sur la fonction RewriteBase URL Rewriting et .htaccess 15 Octobre 2007
.htaccess ne fonctionnent pas, merci pour votre aide URL Rewriting et .htaccess 16 Août 2007
aide js : passage d'un objet dans une fonction Développement d'un site Web ou d'une appli mobile 16 Novembre 2006
fonction pref_match_all php petite aide Administration d'un site Web 30 Octobre 2005
[aide] Mes pages sattelites ne fonctionnent points !!! Problèmes de référencement spécifiques à vos sites 7 Octobre 2005
Aide pour créer une fonction PHP Développement d'un site Web ou d'une appli mobile 26 Août 2005
Aide PHP pour la fonction SELECT MAX Administration d'un site Web 27 Avril 2005
Besoin d'aide pour fonction rewrite. Je désespère. Forum php URL Rewriting et .htaccess 12 Mai 2003
Aide requete sql Développement d'un site Web ou d'une appli mobile 28 Novembre 2022
Aide mémoire de fin d’étude Le café de WebRankInfo 12 Août 2022
Aide petite regex Développement d'un site Web ou d'une appli mobile 28 Juin 2022
Aide données structurées produits Woocommerce Débuter en référencement 4 Mai 2022