[Résolu] JSON et balise HTML

Bonsoir à tous,

Le problème est simple, j'ai des balises HTML, pas exemple :

<span class=\"normal\">Mon span</span>

Si je fais ceci :

JSON.stringify(maVarQuiContientMonHTML);

Plus loin je fais un :

JSON.parse(maVarStringifié);

Et là, patatra, il me fait sauter mes \ qui protège mes " dans les class. Quelqu'un aurait il une solution ? J'ai essayais avec les ' et je ne suis pas sûr que ce soit la solution...

Merci pour votre aide.

EDIT : à moins que ce soit ma concaténation qui pose problème mais j'ai pourtant vérifier le résultat.

datas[i] = '{"thumb": "' + var[i].thumb + '", "image": "' + var[i].image + '", "title": "' + var[i].title + '", "description": "' + var[i].description + '"}';
localStorage.setItem('ls_' + i, JSON.stringify(datas[i]));

[/i][/i][/i][/i][/i][/i]
Modifié par MagicCarpet (12 Jan 2013 - 23:22)

Salut,

Le but d'un JSON.stringify() est de transformer du json en string. Ici ce n'est pas du json dans t'as variable data, mais un string représentant du json

Donc, pas besoin de JSON.stringify :

datas[ i] = '{"thumb": "' + var[ i].thumb + '", "image": "' + var[ i].image + '", "title": "' + var[ i].title + '", "description": "' + var[i ].description + '"}';
localStorage.setItem('ls_' + i, datas[ i]);

Mais comme il n'est pas à proscrire que des quotes existent dans les descriptions ou autres, il faut protéger chaque données:

datas[ i] = '{"thumb": ' + JSON.stringify(var[ i].thumb) + ', "image": ' + JSON.stringify(var[ i].image) + ', "title": ' + JSON.stringify(var[ i].title) + ', "description": ' + JSON.stringify(var[i ].description) + '}';
localStorage.setItem('ls_' + i, datas[ i]);

Ce qui est particulièrement hideux, autant passé par un véritable objet json:

datas[ i] = {
  thumb: var[ i].thumb,
  image: var[ i].image,
  title: var[ i].title,
  description: var[i ].description
};
localStorage.setItem('ls_' + i, JSON.stringify(datas[ i]));

D'ailleurs, est-ce vraiment utile que datas soit un tableau ?

Merci pour ta réponse, bien expliqué. Mais çe ne fonctionne toujours pas

Pour répondre à ta question, non, effectivement datas n'a pas besoin d'être un tableau.
Mais à chaque fois que je veux récupérer ma valeur de 'image' contenu dans le JSON (ou toute autre clé) je me retrouve avec un nulle ! (le premier affichage fonctionne mais si tu rafraichis ça passe plus).

EDIT : ou alors je ne comprends pas ta phrase "Le but d'un JSON.stringify() est de transformer du json en string". Enfin je passe à côté d'un truc en tout cas...
Modifié par MagicCarpet (12 Jan 2013 - 23:22)

Salut,

Le problème vient est dans la récupération des données.
Comme "i" est correspond au nombre de d'élément enregistrer, CGP_JSON_Util_'+i est une clef qui n'existe pas. Ce qu'il faut c'est une boucle de 0 à nbrImage.
Il y a bien une boucle mais elle ce fait sur toutes les clefs du localStorage ce qui fait que CGP_JSON_Util_'+i donne "CGP_JSON_Util_CGP_JSON_Util_1" et ne fonctionne pas.

jo_link_noir a écrit :
Salut,

Le problème vient est dans la récupération des données.
Comme "i" est correspond au nombre de d'élément enregistrer, CGP_JSON_Util_'+i est une clef qui n'existe pas. Ce qu'il faut c'est une boucle de 0 à nbrImage.
Il y a bien une boucle mais elle ce fait sur toutes les clefs du localStorage ce qui fait que CGP_JSON_Util_'+i donne "CGP_JSON_Util_CGP_JSON_Util_1" et ne fonctionne pas.

Ha oui, effectivement. i est bien égal à se que j'attendais mais je concaténais (sans m'en rendre compte) avec ma chaine de caractère. Donc ça ne pouvais pas fonctionner.

Merci mais maintenant j'ai le 'vrai' problème car j'ai une erreur sur le parse, à cause des ".
Modifié par MagicCarpet (11 Jan 2013 - 19:45)

Fait un localStorage.clear() pour supprimer les données. Certaines doivent être un peu pourries à force de faire des tests .

jo_link_noir a écrit :
Fait un localStorage.clear() pour supprimer les données. Certaines doivent être un peu pourries à force de faire des tests .

Je l'ai fais, en fait, à chaque fois que je veux voir la page je vais dans les outils de dev, localStorage et je les supprimes à la main. Ou alors je fais un export file qui lui fais aussi un localStorage.

Pourtant je fais ça pour enregistrer dans le localStorage :

datas = {
				  thumb: dataGalleria[i].thumb,
				  image: dataGalleria[i].image,
				  title: dataGalleria[i].title,
				  description: dataGalleria[i].description
			};
			localStorage.setItem('CGP_JSON_Util_' + i, JSON.stringify(datas));

Ca :

datas = '{"thumb": "' + JSON.stringify(dataGalleria[i].thumb) + '", "image": "' + JSON.stringify(dataGalleria[i].image) + '", "title": "' + JSON.stringify(dataGalleria[i].title) + '", "description": "' + JSON.stringify(dataGalleria[i].description) + '"}';

et ca :

datas = '{"thumb": "' + dataGalleria[i].thumb + '", "image": "' + dataGalleria[i].image + '", "title": "' + dataGalleria[i].title + '", "description": "' + dataGalleria[i].description + '"}';

Mais si je regarde le localStorage, j'ai ca :

[object Object]

Et avant j'avais ceci :

<STOP />

Ca fonctionne... erg !!! A force de tourner en bourique !!! En fait, il faut faire ceci :

datas = '{"thumb": ' + JSON.stringify(dataGalleria[i].thumb) + ', "image": ' + JSON.stringify(dataGalleria[i].image) + ', "title": ' + JSON.stringify(dataGalleria[i].title) + ', "description": ' + JSON.stringify(dataGalleria[i].description) + '}';

Car le stringify ajoute des ". Merci pour ton aide, je devenais fous j'y ai passé la semaine...

Bon eh bien en espérant que ça aide quelqu'un un jour... Bon week-end.[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]

EDIT : C'est pas encore bon Si on fais une modification dans un titre, on rafraichit, ca plante...

EDIT 2 : j'ai abandonné l'idée de faire de datas un tableau. Ta suggestion me paraissais pas mal sur le coup mais quand on modifie une valeur, je change uniquement la partie de la variable et je ré-enregistre le contenu complet dans le localStorage. Sans la variable, ça commence à devenir compliqué à tout gérer. Si tu regardes les écouteurs que j'ai mis pour les h3 et textarea. Donc je pense qu'il faut la remettre en array, quand penses-tu ? (il y'a peut-être autre chose de mieux à faire ?)
Modifié par MagicCarpet (12 Jan 2013 - 00:18)

C'est du au keyup qui enregistre le contenu du textarea et non un objet avec thumb, description, …

jo_link_noir a écrit :
C'est du au keyup qui enregistre le contenu du textarea et non un objet avec thumb, description, …

Tu veux dire transformer mon contenu du localStorage en objet ?

Sa va pas faire beaucoup sur un keyup de prendre la source, transformation en objet, modification de la valeur, retransformation en chaine pour ré-enregistrer ?
Et si je fais ça globalement pour tous mes objets, en cas de coupure je perds tout.
C'est vraiment pas mieux la variable data en tableau qui elle aussi peut-être perdu mais qui est beaucoup plus simple pour une sauvegarde 'permanente' ?

Ou alors j'ai rien compris... Merci pour ta réponse.
Modifié par MagicCarpet (12 Jan 2013 - 09:31)

J'ai revérifier pour voir mais tu as changé ou alors je me suis trompé ^^.
En fait j'avais crut voir un truc comme:

localStorage.setItem('CGP_JSON_Util_' + i, JSON.stringify(contenu_textarea));

MagicCarpet a écrit :
Et si je fais ça globalement pour tous mes objets, en cas de coupure je perds tout.

Pas comprit le "en cas de coupure", le but d'un localStorage est d'enregistrer localement...

MagicCarpet a écrit :
Sa va pas faire beaucoup sur un keyup de prendre la source, transformation en objet, modification de la valeur, retransformation en chaine pour ré-enregistrer ?

Si, mais j'avais l'impression que le format enregistrer n'était pas bon.
Je pense que blur sera mieux que keyup, comme pour le h3 en fait.


Là je test et ça fonctionne.

jo_link_noir a écrit :
J'ai revérifier pour voir mais tu as changé ou alors je me suis trompé ^^.
En fait j'avais crut voir un truc comme:

localStorage.setItem('CGP_JSON_Util_' + i, JSON.stringify(contenu_textarea));

J'ai bien changé des trucs, a priori tout fonctionne mais j'attendais ta réponse pour savoir se que j'allais faire concernant ma variable datas.

jo_link_noir a écrit :

Pas comprit le &quot;en cas de coupure&quot;, le but d'un localStorage est d'enregistrer localement...

Je me suis mal exprimé et ceci concerne donc ma question en réponse à ta réponse précédente. Actuellement j'utilise une variable datas qui es un tableau et qui contient toutes les données des images. Si il y'a une coupure (panne de courant ou si tu ferme le navigateur), les données du localStorage seront toujours là mais plus la variable datas.
Tu suggères plus haut (mais je ne suis pas sûr d'avoir bien compris), que je récupère mes données de mon localStorage, je transforme en JSON, apporte les modifications, stringify et enregistre les nouvelles données dans le localStorage ? Se qui me parait beaucoup de chose pour une action qui sera effectué à chaque keyup. Ou alors je garde ma variable, qui certes prends un peu plus de place en mémoire, mais qui es plus rapide et pratique à utiliser ? Je sais pas si je suis suffisamment clair.

jo_link_noir a écrit :

Si, mais j'avais l'impression que le format enregistrer n'était pas bon.
Je pense que blur sera mieux que keyup, comme pour le h3 en fait.
Là je test et ça fonctionne.

J'y ai pensé mais on passera plus de temps sur un textarea que dans un h3. C'est un peu exagéré, je te l'accorde mais plus sûr.

Merci en tout cas pour ton aide.

MagicCarpet a écrit :
Tu suggères plus haut (mais je ne suis pas sûr d'avoir bien compris), que je récupère mes données de mon localStorage, je transforme en JSON, apporte les modifications, stringify et enregistre les nouvelles données dans le localStorage ? Se qui me parait beaucoup de chose pour une action qui sera effectué à chaque keyup. Ou alors je garde ma variable, qui certes prends un peu plus de place en mémoire, mais qui es plus rapide et pratique à utiliser ? Je sais pas si je suis suffisamment clair.

Je pensais plutôt à réécrire toute la section sans récupérer la contenu du localStorage, ça évite la lecture+parsing mais il faut recréer entièrement l'objet, même si 4 valeurs ce n'est pas beaucoup.
Le data permet de modifier que ce qui change et au besoin faire des traitement sur l'ensemble des éléments. Mais comme ce n'est pas le cas ici, à toi de voir: plus de mémoire ou plus de cycle CPU (plus de calcul).

Du coup je me demande s'il n'est pas plus performant de mettre une item par élément: CGP_JSON_Util_0_thumb, CGP_JSON_Util_0_title, CGP_JSON_Util_0_description, CGP_JSON_Util_1_thumb, ...
Il n'y aurais plus de JSON.parse/stringify étant donné que ce serais de simple string et la modification se ferait de façon totalement individuelle.

Sinon pour éviter le keyup, tu peux faire une temporisation qui sauvegarde -par exemple- toutes les 10 secondes. Elle s'active quand on rentre dans l'élément et ce désactive quand on n'en sort.
En cas de crash ou de coupure de courant tu auras au pire perdu 10 secondes de texte, ce qui me semble raisonnable. Je croit que fermer le navigateur lance quand même le blur, sinon y a un événement pour la fermeture d'une page.

En parlant de performance, regarde Jquery.on et transforme:

$('form').append('<article draggable="true" ondrag="drag()"><section id="' + i + '"></section></article>');
$('form > article:last-child section').append(dataGalleria[ i].title);
$('form > article:last-child section h3').attr('contenteditable', 'true');
$('form > article:last-child section').append('<p class="nbr">' + ++nbr + '</p>');
$('form > article:last-child section').append('<p class="pathImage">' + dataGalleria[ i].image + '</p>');
$('form > article:last-child section').append('<p class="pathThumb" style="display: none">' + dataGalleria[ i].thumb + '</p>');
$('form > article:last-child section').append('<p class="radioBox"><label for="ad' + i + '">AD <input type="radio" id="ad' + i + '" name="pictures_' + i + '" value="ad" /></label><label for="nb' + i + '">NB <input type="radio" id="nb' + i + '" name="pictures_' + i + '" value="nb" /></label></p>');
$('form > article:last-child section').append('<textarea>' + dataGalleria[ i].description + '</textarea>');

en

$form = $('form')
//....
$section = $form.find('> article:last-child section');
$section.append(append(dataGalleria[ i].title +
                         '<p class="nbr">' + ++nbr + '</p>' +
                         '<p class="pathImage">' + dataGalleria[ i].image + '</p>' +
                         '<p class="pathThumb" style="display: none">' + dataGalleria[ i].thumb + '</p>' +
                         '<p class="radioBox"><label for="ad' + i + '">AD <input type="radio" id="ad' + i + '" name="pictures_' + i + '" value="ad" /></label><label for="nb' + i + '">NB <input type="radio" id="nb' + i + '" name="pictures_' + i + '" value="nb" /></label></p>' +
                         '<textarea>' + dataGalleria[ i].description + '</textarea>'
).find('h3').attr('contenteditable', 'true');

Faire à chaque fois $('form > article:last-child section') n'est pas une opération légère.

J'avais pensé à une sauvegarde toutes les x secondes mais pas à la désactivé en sortant du champ, se qui n'est pas idiot...

Je vais regardé aussi le on c'est plutôt pas mal, je réfléchissait à faire autrement mais je ne savais pas comment m'y prendre

Merci pour toutes ces infos et bonne fin de soirée.

EDIT : une dernière question, est-ce que tu connais jQuery UI ? Parce que j'essaye de rendre mes éléments sortable mais apparemment ça ne fonctionne pas. Enfin je dis pas que leur bibliothèque ne marche pas, mais dans mon cas je n'arrive pour le moment pas à l'appliquer. Je suis en train de suivre un tuto mais rien ne se passe...
Modifié par MagicCarpet (12 Jan 2013 - 21:39)

MagicCarper a écrit :
une dernière question, est-ce que tu connais jQuery UI ?

Noop, mais fait un nouveau sujet.

Bonne fin de soirée.