Récupérer le contenu d'un json dans une variable (globale).

Bonjour,

Le 16/03/2016 08:17, Gérald Niel a écrit :

je sèche sur un problème (et JavaScript n'est pas un langage que je
maitrise tant que ça)…

Je ne suis pas un expert de JavaScript non plus, mais bon, à
tout hasard...

[...]
La paire clef/valeur est obtenue depuis une requète sur la base qui
renvoie un tableau d'objet JSON.

Le problème est que là… je ne sais pas récupérer en début de script ce
tableau dans une variable

JSON.parse() ?

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON/parse

(j'utilise jQuery, mais je peux utiliser
autre chose).

jQuery.parseJSON() ?

http://api.jquery.com/jquery.parsejson/

Faut-il que j'imbrique la suite du script dans le callback de l'appel
de la fonction ajax pour pouvoir utiliser les données ?
Ou il y a un moyen de les récupérer dans une variable globale ?

En fait je crois que je n'ai pas compris la question. Si jamais ma
réponse ne t'aide pas et que SAM ne vient pas à ton secours, je
pense qu'un petit exemple pourrait nous aider à comprendre.


--
Olivier Miakinen

« Au fond, diviser par zéro revient à unifier la Mécanique Quantique
et la Relativité Générale. » -- M.A. le 7/3/2016 dans fr.sci.maths

Le 16/03/16 11:32, Olivier Miakinen a écrit :

Bonjour,

Le 16/03/2016 08:17, Gérald Niel a écrit :

je sèche sur un problème (et JavaScript n'est pas un langage que je
maitrise tant que ça)…

Je ne suis pas un expert de JavaScript non plus, mais bon, à
tout hasard...

[...]
La paire clef/valeur est obtenue depuis une requète sur la base qui
renvoie un tableau d'objet JSON.

OK, donc on "ajactionne" la requête à BdD et on attend le "200" pour
appeler la fonction de traitement de l'objet (string ?) JSON ==>
- extraction de la chaine en un objet JS (tableau de sous tableaux)
- "nourrissage" du html: remplissage du table visé avec les éléments,
les contenus, du tableau (array) ci-dessus

Le problème est que là… je ne sais pas récupérer en début de script ce
tableau dans une variable

???
C'est la requête AJAX qui "récupère" le bazar machin JSON qui
doit(devrait?) être une chaîne de caractères

JSON.parse() ?

Ou, si c'est du pas compliqué
eval('('+laVariableJsonnesque +')');
?

... json = JSON.parse('"'+ httpRequest.responseText +'"');

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON/parse

voir aussi :
http://www.json.org/js.html

Faut-il que j'imbrique la suite du script dans le callback de l'appel
de la fonction ajax pour pouvoir utiliser les données ?
Ou il y a un moyen de les récupérer dans une variable globale ?

Pourquoi une variable globale ?
On peut bien envoyer le httpRequest à une fonction extérieure.

En fait je crois que je n'ai pas compris la question. Si jamais ma
réponse ne t'aide pas et que SAM ne vient pas à ton secours,

Holà ! Holà !
Ne pas confondre "SAM" et "gourou" !!!

Moi pas trop comprendre la question non plus.
Est-ce réellement un problème de "traduction" d'objet JSON ?
N'est-ce pas simplement une question de tempo ? (à quel moment dé-jisonner)

je pense qu'un petit exemple pourrait nous aider à comprendre.

à tout le moins, un schémas (plan) du code JS employé pour obtenir les
infos et les afficher sur la page web déjà ouverte.


Pour mémoire (MàJ 03/25/2014) :
https://developer.mozilla.org/fr/docs/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple
où l'on voit que "la variable" est propre à la fonction de
requête/traitement et où l'on imagine que
alert(httpRequest.responseText);
sera remplacé par l'appel à la fonction de traitement JSON
maFonctionJsonneuse(httpRequest.responseText);

function maFonctionJsonneuse(json) {
json = eval( '('+json +')'); // ou ... json = JSON.parse(json);
if(json && json.length>0)
for(var i=0, z=json.length; i<z; i++) {
document.create .... et bla bla bla
les rangées i
leurs cellules et contenus ...
json[i].article,
json[i].prixU,
json[i].quantite
...
}
else alert('y a une erreur !!!');
}

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le Jeudi 17 mars 2016 à 22:57 UTC, SAM écrivait sur
fr.comp.lang.javascript :

C'est la requête AJAX qui "récupère" le bazar machin JSON qui
doit(devrait?) être une chaîne de caractères

En fait j'ai d'un coté un "serveur" en REST qui renvoit du JSON.
Une sorte d'API REST.

Est-ce réellement un problème de "traduction" d'objet JSON ?

Non.

N'est-ce pas simplement une question de tempo ? (à quel moment dé-jisonner)

Voilà.

à tout le moins, un schémas (plan) du code JS employé pour obtenir les
infos et les afficher sur la page web déjà ouverte.

Je m'explique, en plantant le décors…
Nous sommes en pleine "révolution" dans notre SI avec un changement de
logiciel pour gérer vente/neuf/stock magasin.

J'ai déjà une BDD article bien fourni pour le logiciel en prod qui
nous gère la loc/presta (dont pas mal d'articles commun, et existant).

Pour les achats/stock boutique un autre logiciel (mort et enterré au
01/04) avec une BDD article inexploitable (volontairement laissé
pourrir, j'assume).

Donc là je fais une petite appli pour profiter de l'inventaire et
initialiser les stocks.

Je récupère les données à afficher au format JSON, je les affiche avec
datatable.
Je modifie le rendu des cellules pour y placer des champs de type
input ou select (pour les listes). Mais je dois surtout placer le
'selected' sur l'entrée qui correspond à la valeur initiale de la
cellule (qui est la clef dont j'affiche le libellé).

J'ai une liste de zone de stockage qui va évoluer et je dois dans une
cellule proposer la liste des zone stock en face de la réf article
pour la renseigner. (et écrire la clef dans la colonne de la BDD)

$.ajax({
url: 'http://server/script',
data: { param: velur },
type: 'POST',
dataType: 'json',
success: function(data, statut){
// ici je veux récupérer data que je traite après
// dans la cellule 'DataTables'
}
});

Plus loin dans le script j'appelle DataTables, à la construction de la
cellule :

"render": function ( data, type, row ) {
output = '<select id="zonestk-' + row.rowid + '"onchange="modif(' + row.rowid + ', 'zonestk')">';
modstk.forEach(function(elem) {
output +='<option value="' +elem.id + '"';
output += (row.zonestk == elem.id) ? ' selected>' : '>';
output += elem.lib + '</option>';
});
output += '</select>';
return output;
}

Si je place l'appel Ajax ici, j'en ai un pour chaque ligne du tableau.
C'est pourquoi j'ai besoin de récupérer la variable 'zonestk' quelque
part avant.
L'autre soucis, est pour selectionner l'élément en fonction de la
valeur initiale de la cellule.

la fonction modif() renvoit les données au "serveur" pour mettre à
jour la BDD en récupérant la valeur du td '#zonestk-rowid".
Cette fonction me sert pour toutes les cellules.

J'ai deux type de champs listes à traiter de la même façon.

@+
--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-

Le Vendredi 18 mars 2016 à 06:42 UTC, Gérald Niel écrivait sur
fr.comp.lang.javascript :

J'ai deux type de champs listes à traiter de la même façon.

En ce moment je fais quick and dirty en récupérant la chaine json dans
une variable (tableau) JS avec PHP.

Mais du coup je peux pas avoir une appli cliente HTML/JS sans serveur web.

@+
--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-

Le 18/03/16 07:47, Gérald Niel a écrit :

Le Vendredi 18 mars 2016 à 06:42 UTC, Gérald Niel écrivait sur
fr.comp.lang.javascript :

J'ai deux type de champs listes à traiter de la même façon.

En ce moment je fais quick and dirty

??? encore des nouvelles fonctions PHP ???

en récupérant la chaine json dans
une variable (tableau) JS avec PHP.

et si c'est si compliqué de traiter avec JSON pourquoi le PHP ne fait
pas tout (envoie un string de tout le code HTML) et le JS fait un
échange/remplacement de tout le TABLE ?

Mais du coup je peux pas avoir une appli cliente HTML/JS sans serveur web.

Pour sûr !
On ne peut avoir une appli HTML sans serveur
sauf ..
... à ce qu'on arrive à envoyer la BdD au JS de l'«appli»
ET que l'on n'aie pas à modifier/compléter la BdD


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le 18/03/16 07:42, Gérald Niel a écrit :

J'ai une liste de zone de stockage qui va évoluer et je dois dans une
cellule proposer la liste des zone stock en face de la réf article
pour la renseigner. (et écrire la clef dans la colonne de la BDD)

Ça, c'est du bête HTML/PHP :
le PHP récupère le nom du SELECT et sa valeur (qui est celle de l'OPTION
sélectionné)
Yapuka
soit la clé est un string soit un nombre
si on veut obtenir un nombre (le Nº du rang d'options) il faudra
installer un champ caché et qu'au changement de sélection le JS donne à
ce champ la valeur du selectedIndex +1 du SELECT

$.ajax({
url: 'http://server/script',
data: { param: velur },
type: 'POST',
dataType: 'json',
success: function(data, statut){
// ici je veux récupérer data que je traite après
// dans la cellule 'DataTables'

succes: function() { traitement(data) };
// succes: function() { traitement(data.param) };
où 'traitement' est une fonction extérieure créée pour remplir "DataTables"
????

}
});

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le 18/03/16 07:42, Gérald Niel a écrit :

Voilà.
Je m'explique,
J'ai

$.ajax({

(snip)

Plus loin dans le script j'appelle DataTables,

M'a tout l'air d'être du pur jQuerry c't'affaire !

:-(

"render": function ( data, type, row ) {
output = '<select id="zonestk-' + row.rowid + '"onchange="modif(' + row.rowid + ', 'zonestk')">';
modstk.forEach(function(elem) {

c'est quoi ce modstk ?
c'est quoi ce elem ? comment est-il déterminé ?

output +='<option value="' +elem.id + '"';
output += (row.zonestk == elem.id) ? ' selected>' : '>';
output += elem.lib + '</option>';
});
output += '</select>';
return output;
}

Si je place l'appel Ajax ici, j'en ai un pour chaque ligne du tableau.

???

N'est-ce point le seul et même 'data' (évoqué dans le $.ajax() qui est
exploité tout au long des remplissages ?
Bien que ... il n'a pas l'air d'être utilisé dans :
"render": function ( data, type, row ) { ... }

data est un tableau (array) des rows du table(HTML), je présume.
On boucle sur ce tableau pour en remplir les rangées du table,
à chaque passage on boucle sur l'array des cellules de la rangée,
à chaque cellule on extrait les données issues de l'objet, qui d'un
select, qui d'un input, qui ... etc.

C'est pourquoi j'ai besoin de récupérer la variable 'zonestk' quelque
part avant.

Ha! v'là du nouveau ! c'est quoi cette variable ?
Je vois plus un string pour nommer un ID, non ?

output += (row.zonestk == elem.id) ? ' selected>' : '>';

Ha! Ben non ! ... row.zonestk ... on est un peu perdu là entre les
variables et les noms
Cette variable zonestk représente quoi ? à quoi sert-elle ?

Le string de l'id, de la value, ne peu(ven)t-il(s) être construit(s) à
partir du 'type' ou du 'row' ?

On a un array des cellules (leurs types, id, etc) soit déterminé
d'avance dans le script JS, soit construit après chargement de la page
(une boucle sur les éléments du form pour en récupérer les objets DOM)

On fait donc un "for" sur cet array et à chaque passage on lance le
"render:"
Non ?
Bon ... peut-être pas sous la même forme exacte ...

L'autre soucis, est pour selectionner l'élément en fonction de la
valeur initiale de la cellule.

Et le PHP y fait quoi ? On le paie à quoi faire ce paresseux !?!
On a posté le form au PHP il en triture le contenu pour voir à voir s'il
modifie sa BdD et renvoie par AJAX la nouvelle configuration de ce form,
y compris le truc pour dire qui est sélectionné

output += zonestk

Quel "élément" ? l'input ?

la fonction modif() renvoie les données au "serveur" pour mettre à
jour la BDD en récupérant la valeur du td '#zonestk-rowid".

... on ne comprend rien à rien : que viennent faire là les histoires de
TD ???
on n'est pas en train de traiter un FORM ?
Y a pas un INPUT pour valoriser zonestk ou n'importe quoi qu'on veut

Cette fonction me sert pour toutes les cellules.

modif(this)
non ?

pas la peine de se mettre martel en tête avec des
modif('truc'+machin.id,'zonestk')
'this' qui désigne alors le select saura bien retrouver (en JS)
- son id
- et celui de sa rangée conteneuse
- par voie de conséquence le imput correct de même rangée
D'ailleurs, 'this' n'a même pas à avoir à connaître les id de qui que ce
soit pour retrouver le input cible

<select onchange="modif(this)" id="truc-0023" name="truc-0023">

function modif(quoi) {
// quoi (this dans l'appel à la fonction) cherche quel est son conteneur
conteneur = quoi.parentNode;
while(conteneur.tagName != 'TR') conteneur=conteneur.parentnode;
// puis l'input cible
cible = conteneur.getElementsByTagName('INPUT').[0];
// ou : cible = conteneur.getElementsByTagName('TD').[2];
// après on peut donc remplir cet input,
// par exemple avec la valeur de l'option choisie dans la liste
cible.value = quoi[quoi.selectedIndex].value;
// ou : cible.innerHTML = quoi[quoi.selectedIndex].value;
// et y a rien à retourner, tout est dit, fait !
// au pire on ajoute un champ caché avec la même valeur
// champ que le PHP saura bien retrouver lors du POST
}
... bien que ... le PHP ne devrait avoir besoin que de la valeur du
select pour savoir quelle option a été choisie (et ainsi renvoyer quelle
option a le selected).

J'ai deux type de champs listes à traiter de la même façon.

Il faudrait réviser le fonctionnement (HTML) des formulaires puis le JS
des forms du siècle dernier et qui a toujour cours de nos jours.
Avec le JS DOM et les jquiriellisqueries on oublie trop les bases ...

On donne un nom (name) aux balises :
- form
- select (qui va renvoyer en valeur celle de l'option sélectionnée)
- input
- type radio du même choix portent le même nom
- text
- chekbox
- hidden
- ...
- textarea
le HTML renvoie naturellement le tableau name/value de chaque élément où
'name' sera une variable PHP
le PHP récupère ces couples $nom/valeur, les analyse et stocke puis
renvoie le nouvel affichage, si besoin avec indication TD, TR, element
(balise,name,value,checked), sous-elements(balise,value,text), celui
selected

Maintenant, il est possible qu'en HTML.5 les IDs suffisent et
remplissent le rôle des NAMEs ...
M'enfin ... c'est tellement plus facile/simple avec les NAMEs
(le JS sait très facilement retrouver les éléments d'un form par leurs
noms, plus facilement qu'en DOM avec les IDs)


Pour une analo du schmilblick :
- le TABLE HTML (code html après affichage)
- le contenu du JSON envoyé par le PHP
- script JS ajax (sauf s'il est entièrement en jQuerry, là on ne peut rien)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

Le Dimanche 20 mars 2016 à 00:40 UTC, SAM écrivait sur
fr.comp.lang.javascript :

$.ajax({
url: 'http://server/script',
data: { param: velur },
type: 'POST',
dataType: 'json',
success: function(data, statut){
// ici je veux récupérer data que je traite après
// dans la cellule 'DataTables'

succes: function() { traitement(data) };
// succes: function() { traitement(data.param) };
où 'traitement' est une fonction extérieure créée pour remplir "DataTables"
????

}
});

En fait, pour l'instant ceci fait ce dont j'ai besoin.
Et oui, l'appli, c'est du jQuery (DataTables est un "plugin" jQuery).
C'est un truc de fainéant qui n'a pas envie de tout (re)coder (parce
que coder c'est pas son métier ni sa fonction principal).
Ça construit la table coté client avec les données JSON récupéré en
XHR. C'est moins usine à gaz que les jqxWidget. Et la licence MIT me
permet de l'utiliser en accord avec ma consience dans le contexte
d'une activité commerciale.

var zoneStk = function() {
return $.ajax({
type: 'POST',
data: { data: zonestk, json: true }
url: 'http://server/script.php',
dataType: 'json',
async: false
}).responseJSON.zonestk;
};

var zonestk = zoneStk();

Je récupère bien mon tableau dans la variable zonestk accessible dans
le reste du script. Bon… je me fais "engueuler" dans la console qui me
dit que je ne devrais pas faire du synchrone avec XMLHttpRequest. Mais
j'assume.

Si quelqu'un a une meilleure idée…

Les divers champs input ou select présents dans la table sont
subsititué (par la fonction 'render' de DataTables) aux données
affichées dans les td.
Ça ne fait pas partie d'un formulaire (mais ça pourrait, je vais
essayer cette piste si ça me permet de simplifer) et ça me sert à
envoyer la requète XHR au serveur pour mettre à jour la BDD.
la fonction modif() sert à ça. Elle prend en paramètre le rowid de
l'enregistrement dans la BDD (sqlite) et le nom de la colonne.
La valeur est récupéré depuis l'id de l'élément dans le DOM dans la
fonction ajax (ou XHR) de jQuery.

L'idée est de déployer mes fichiers HTML+CSS sans avoir besoin que
ceux-ci soit hebergé sur le serveur. Un peu à l'image de ce qu'à
développé JA avec son client 'JNTP'.

@+
--
On ne le dira jamais assez, l'anarchisme, c'est l'ordre sans le
gouvernement ; c'est la paix sans la violence. C'est le contraire
précisément de tout ce qu'on lui reproche, soit par ignorance, soit
par mauvaise foi. -+- Hem Day -+-