Cache avec contenu variable ?

ortolojf · 2 Décembre 2020

Bonjour

J'ai remis ma notation à étoiles, avec le CMP Sirdata.

J'ai un problème avec le cache html.

Il semblerait que je doive mettre l'affichage de la notation à étoiles, en Javascript.

Pour l'instant, le PHP en amont pilote la lecture de la table MySQL VOTES et affiche en Javascript.

Il n'y a pas de PHP quand le cache est actif.

Donc le code Javascript devrait tout faire : lecture bdd et affic.

Je tiens à garder ma bdd telle quelle.

Comment lire ma bdd en Javascript ?

Merci beaucoup de votre aide.

ortolojf · 3 Décembre 2020

Excusez-moi

Pour lire une table MySQL à partir de Javascript, y a-t-il une autre solution que l'Ajax ou le fetch ?

C'est-à-dire, aspiration d'un script php ?

Merci beaucoup.

rick38 · 3 Décembre 2020

Je ne vois pas comment il y aurait un autre moyen, non.

Imaginons accéder à la base par javascript, le port TCP 3306 (par exemple, par défaut pour MySQL), serait bloqué par les firewalls, il faut tout faire transiter par la connexion web, donc appeler un fichier PHP par l'ajax.

ortolojf · 5 Décembre 2020

Bonjour rick38

J'ai fini par mettre au point.

star_data.php a le header 'application/json'.

Je ne sais pas quel content-type mettre pour cette requête post.

Le résultat est correctement reçu dans data sous forme d'object, je crois qu'il déjà parsé ( façon JSON.parse().

Le fetch est asynchrone, donc array_star_read = undefined.

A l'intérieur du fetch, je déclencherai les deux fonctions javascript : affic_liens_etoiles(data) et json_ld_etoiles(data), qui alimenteront les variables javascript contenant les interfaces de la notation à étoiles, et du snippet json.

Tout est asynchrone.

J'ai un peu de mal à me mettre aux promise en Javascript.

Merci beaucoup rick38 pour ton aide.

JavaScript:

<script>
function read_star_data(arrayRequest) {
    var url = new URL(window.location.protocol + '//' + window.location.hostname + '/php/config/star_data.php');
    myHeaders = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
    var myInit = {
        method: 'POST',
        headers: myHeaders,
        body: arrayRequest.join('&'),
        mode: 'cors'};
        fetch(url, myInit)
            .then(function(response) {
                return response.json()
            })
                .then(function(data) {
                    console.log('data = ' + Object.entries(data));
                    return Object.entries(data);
            })
            .catch(function(error) {
                    console.log('read error = ' + error);
                return null;
            })
}
    var arrayParameters = new Array('STAR_COOKIE=' + encodeURIComponent(''), 'star=' + encodeURIComponent(0), 'PAGE=' + encodeURIComponent('racinexx'));
    console.log('arrayParameters = ' + arrayParameters);
    array_star_read = new Array();
    array_star_read = read_star_data(arrayParameters);
    console.log('array_star_read = ' + array_star_read);
</script>

ortolojf · 5 Décembre 2020

Bonjour rick38

Je fais tout en Javascript pour mon snippet à étoiles et mon ld_json.

j'ai l'objet JSON contenant les variables/valeurs, le problème est de faire l'échange chaîne de caractères <=> contenu html.

Les chaînes de caractères seront produites par ces deux fonctions : json_ld_etoiles(data) et affic_liens_etoiles(data), et affichées de manière séparée.

J'aurais besoin de savoir comment traduire une string, ou object, ou json, ou array, en dom html.

Merci beaucoup de ton aide.

Amicalement.

ortolojf · 5 Décembre 2020

Bon

Voilà ce que j'obtiens pour le snippet json_ld :

JavaScript:

json_ld = "{\"script\": \"application/ld+json\",\"@context\": \"https://schema.org/\",\"@type\": \"Game\",\"aggregateRating\": {\"@type\": \"AggregateRating\",\"itemReviewed\": \"Vendredi 4 Décembre 2020<br>Courses passées\",\"ratingValue\": \"3.5\",\"worstRating\": \"1\",\"bestRating\": \"7\",\"ratingCount\": \"0\"}}"

A l'affichage, je prendrai le premier item pour le script.

Le reste est-il du texte pur ?

Merci beaucoup.

ortolojf · 5 Décembre 2020

Bonjour

Et le html de la notation à étoiles, ( enrobage, sans l'interface qui n'est pas encore écrite ) :

JavaScript:

json_ld = "<div id=\"staring_form\"><div><span>3 Décembre 2020<br>PARIS VINCENNES<br>- Prix Bourigny</span><p><span class=\"sous_titre\">0</span> Vote&nbsp;&nbsp;&nbsp;<br></div><div id=\"message_interface\"></div></div>"

Comment je vais afficher celà en Javascript ?

Je dois construire le DOM avec des createElement(), etc... ?

C'est possible, mais c'est du code propriétaire.

Amicalement.

ortolojf · 6 Décembre 2020

Bonjour

Pour parcourir un object, dans le but de reconstruire le DOM de manière récursive.

Merci beaucoup.

JavaScript:

function recursiveMapObject(obj, callback) {
  Object.keys(obj).forEach(key) {
    if (typeof obj[key] === "object") obj[key] = recursiveMapObject(obj[key], callback);
    else callback(obj[key], key, obj);
  });
  return obj;
}

ortolojf · 7 Décembre 2020

Bonjour

Voilà ce que j'obtiens ( en object ) pour le snippet json :

Où est l'erreur ?

JavaScript:

{
'script' : 'application/ld+json' {
      '@context' : 'https://schema.org/',
      '@type' : 'Game',
       'aggregateRating' {
          '@type' : 'AggregateRating',
          'itemReviewed' : 'Vendredi 4 Décembre 2020<br>Courses passées',
          'ratingValue' : 3.5,
          'worstRating' : '1',
           'bestRating' : '7',
          'ratingCount' : '0'
     }
}

ortolojf · 7 Décembre 2020

Pardon

J'ai pu corriger l'erreur :

JavaScript:

[
   {"script" : "application/ld+json"}, 
   {"@context" : "https://schema.org/",
      "@type" : "Game","aggregateRating" : {
         "@type" : "AggregateRating",
        "itemReviewed" : "4 Décembre 2020<br>PARIS VINCENNES<br>- Prix Walpurga",
        "ratingValue" : "3.5",
        "worstRating" : "1",
        "bestRating" : "7",
        "ratingCount" : "0"
   }
 }
]

Le bogue est que la déclaration {"script" : "application/ld+json"} n'est pas père du reste, mais frère.

Comment hiérarchiser correctement cet object ?

Merci beaucoup pour vos réponses.

Respectueusement.

ortolojf · 7 Décembre 2020

Excusez-moi

En suivant la méthode dans Google Developers, voici :

Très longuement et douloureusement.

Cà marche.

Me faudrait enrichir ce snippet.

Bien à vous.

Amicalement.

HTML:

<script type="application/ld+json">
{
    "@context" : "https://schema.org/",
    "@type" : "Game","aggregateRating" : {
        "@type" : "AggregateRating",
        "itemReviewed" : "Page d'Accueil",
        "ratingValue" : "3.2",
        "worstRating" : "1",
        "bestRating" : "7",
        "ratingCount" : "5"
    }
}
</script>

ortolojf · 7 Décembre 2020

Là , par contre ...

C'est l'objet json ne contenant pas encore l'interface de notation à étoiles.

Rien à faire pour valider ce truc.

HTML:

{
        "div" : [
                "attrs" : {
                        "id" : "staring_form"
                },
                "div" : {
                        "span" : {
                                "attrs" : {
                                        "id" : "staring_form",
                                        "text" : "Page d'Accueil"
                                }
                        }
                },
                "div" : {
                        "p"
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "class" : "sous_titre",
                                                "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                        }
                                }
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "3.2"
                                        }
                                }
                        },
                        "div" : {
                                "attrs" : {
                                        "text" : " / "
                                }
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "7"
                                        }
                                }
                        },
                        "div" : {
                                "br"
                        },
                        "div" : {
                                "attrs" : {
                                        "id" : "message_interface"
                                }
                        },
                        "attrs" : {
                                "text" : "br",
                                "text" : "br"
                        }
        ]
}

ortolojf · 7 Décembre 2020

Ou de ouf

Validé.

Mais comment simplifier ?

J'ai des "div" comme keys répétitifs, et à cause de celà je suis obligé de les enrober dans des { }.

Voilà :

HTML:

{
        "div" : [
                {
                        "attrs" : {
                                "id" : "staring_form"
                        },
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "id" : "staring_form",
                                                "text" : "Page d'Accueil"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : "p"
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "class" : "sous_titre",
                                                "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "3.2"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : " / "
                                }
                        }
                },
                {
                        "div" : {
                                "span" : {
                                        "attrs" : {
                                                "text" : "7"
                                        }
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "text" : "br"
                                }
                        }
                },
                {
                        "div" : {
                                "attrs" : {
                                        "id" : "message_interface"
                                }
                        },
                        "attrs" : {
                                "text" : "<br><br>"
                        }
                }
        ]
}

ortolojf · 8 Décembre 2020

Rebonjour

Cette fois-ci avec un codage plus fiable des balises html.

Mais comment représenter les relations père-fils ?

Je suis obligé de mettre des clés ( "key1" et "key2" ), pour descendre dans l'arborescence.

Comment simplifier ce fichier json ?

Merci beaucoup.

JSON:

{
        "tag" : "div",
        "id" : "staring_form",
        "key1"    : [
                {
                        "tag" : "div",
                        "key2" : [
                                {
                                        "tag" : "span",
                                        "id" : "staring_form",
                                        "text" : "Page d'Accueil"
                                },
                                {
                                        "tag" : "p"
                                },
                                {
                                        "tag" : "span",
                                        "cls" : "sous_titre",
                                        "text" : "5 Votes&nbsp;&nbsp;&nbsp;"
                                },
                                {
                                        "tag" : "span",
                                        "text" : 3.2
                                },
                                {
                                        "text" : " / "
                                },
                                {
                                        "tag" : "span",
                                        "text" : 7
                                },
                                {
                                        "tag" : "br"
                                },
                                {
                                        "tag" : "div",
                                        "id" : "message_interface"
                                }
                        ]
                },
                {
                        "tag" : "br"
                },
                {
                        "tag" : "br"
                }
        ]
}

ortolojf · 9 Décembre 2020

Bonjour

Je n'obtiens que des entiers dans treatment_object(value, key, obj).

Je teste seulement la récursivité pour l'instant.

C'est une fonction callback appelée récursivement par recursiveMapObject(obj, callback).

Les données en entrée sont correctes, et sont lues sous forme d'objet json.

J'ai vérifié la syntaxe du json.

Comment lire cet objet JSON, et produire du html avec ?

Le format du json est dans le message précédent.

Merci beaucoup de votre aide.

Amicalement.

JavaScript:

<script>
 function stripslashes(str) {
        return str.replace(/\\"/g, '"');
}
 function isEmpty(str) {
    return (!str || 0 === str.length);
}
/*********************************************************/
/**    TREATMENT_OBJECT FUNCTION JSON            **/
/**        JSON => HTML                **/
/*********************************************************/
function treatment_object(value, key, obj) {
    console.log('obj[ ' + key + ' ] = ' + value);
    return value;
    var array_tags_bloc = new Array('div', 'ul', 'li', 'form');
    var array_tags_inline = new Array('input', 'button', 'span', 'p', 'br');
    var array_attrs = new Array('id', 'cls', 'key', 'method', 'action', 'type', 'name', 'value', 'aria-label', 'text');
    if(array_tags_bloc.indexOf(value) !== -1)
        obj = document.createElement(value);
    else if(array_tags_inline.indexOf(value) !== -1)
        obj = document.createElement(value);
    else if(array_attrs.indexOf(key) !== -1)
        obj.setAttribute(key, value);
    return obj;
}
function recursiveMapObject(obj, callback) {
    Object.keys(obj).map(function(value, key, obj) {
        if (typeof value === 'object') {
            obj[key] = recursiveMapObject(value, callback);
        } else {
            callback(value, key, obj);
        }
    });
    return obj;
}
function read_star_data(arrayRequest) {
    var url = new URL(window.location.protocol + '//' + window.location.hostname + '/php/config/star_data.php');
    var json_d = null;
    var json_etoiles = null;
    myHeaders = new Headers({'Content-Type':'application/x-www-form-urlencoded; charset=utf8'});
    var myInit = {
        method: 'POST',
        headers: myHeaders,
        body: arrayRequest.join('&'),
        mode: 'cors'};
        fetch(url, myInit)
            .then(function(response) {
                return response.json()
            })
                .then(function(data) {
                    json_etoiles = affic_liens_etoiles(data);
                    json_ld = recursiveMapObject(json_etoiles, treatment_object);
                    console.log('json_ld = ' + json_ld);
                    return json_etoiles;
            })
            .catch(function(error) {
                    console.log('read error = ' + error);
                return null;
            })
}
    var arrayParameters = new Array('STAR_COOKIE=' + encodeURIComponent('" . $STAR_COOKIE . "'), 'star=' + encodeURIComponent(" . $tmp_star . "), 'PAGE=' + encodeURIComponent('" . $PAGE . "'));
        console.log('arrayParameters = ' + arrayParameters);
    read_star_data(arrayParameters);
</script>