Une aide pour une fonction récursive...

WRInaute accro
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 :

JSON:
   "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.



JavaScript:
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;
    }
}
 
WRInaute accro
Peut-être...

Le return jsonHTML(key2) est remplacé par :

elem.appendChild( jsonNTML(key2));

Amicalement.


JavaScript:
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;
   }
}
 
WRInaute accro
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.
 
WRInaute accro
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.
 
WRInaute accro
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.
 
WRInaute accro
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.



JavaScript:
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;
}
 
Discussions similaires
Haut