Manipuler un objet JSON Résolu/Fermé

Question

Bonjour, Mon titre n'est pas des plus explicites, je vais essayer d'être plus claire ici. N'ayez pas peur de la longueur du topic, le problème est simple. Je fais une requête en ajax avec la méthode ajax() de jquery. Elle me retourne un objet JSON (un recordset) que je manipule avant de l'insérer dans ma page. Voici un peu de code (qui fonctionne) pour mieux me comprendre : [code] $.ajax({ type: "POST", url: "../LOOKUP/DESTINATIONLOOKUP_JSON.asp", dataType: "application/x-www-form-urlencoded", data: "Action=getLookupMileageDestination&Value=" + anchor.value, async: true, success: function(msg) { // get the recordset object JSON var rs = eval(msg); // get the data from the recordset var str = "" for ( var count = 0 ; count < rs.RecordCount ; count++ ) { str += "-"+rs.Records[count].Name+"
" } //insert in the html page $("#LST").append(""+str); } } }) /code Ici je crée simplement un string en concaténant mes propriétés, ça marche bien. Par contre, pour aller plus loin, je voudrais mettre en forme mes propriétés en "; for ( var count = 0 ; count < rs.RecordCount ; count++ ) { str += "" } str += ""; $("#LST").append(""+str); } } }) /code A ce moment, j'ai une erreur dans firebug: missing ; before statement str += "

Groarh · Answer

Salut :)
« missing ; before statement », littéralement « ; (point-virgule) manquant devant la déclaration », ça me paraît peu probable vu ton niveau mais sait-on jamais…

Et si c’était vraiment ça ^^ je t’encourage à trouver une façon de coder pour qu’oublier un point-virgule devienne impossible. Par exemple moi, quand j’ai une longue ligne à taper, je place mon point-virgule d’abord et je recule d’une case ;)

Et puis lis bien les messages d’erreur, ils sont en or !

ordiminnie · Answer

merci pour ta réponse.
En effet, j'avais bien compris qu'il signale un manque de ; mais ce n'est pas le cas. Ou du moins je ne le vois pas...:o
Je pense que ce message d'erreur en cache un autre, un peu comme quand firebug te dit "alert is not a function" alors que si....(dans ce cas ça révèle souvent une erreur dans le code de la fonction qui la rend inexécutable).

je vais encore regarder plus en profondeur et tracker la virgule !

Groarh · Answer

Juste avant ;)
C'est comme les guillemets, si tu oublies de fermer une chaîne il peut te signaler l'erreur des centaines de lignes plus loin, lorsqu'il rencontre un autre guillemet… La morale est la même : la véritable erreur se trouve avant la ligne signalée.
Enfin ça aurait pu être une erreur de recopiage mais c'est cohérent avec le message de firebug.

ordiminnie · Answer

en effet il me manque un point virgule mais ça ne résout pas l'affaire. On m'a dit que les doubles doubles quotes pouvaient aussi poser  problème. Je vais essayer ça mais je crois que le plus propre sera encore de faire mon select via le DOM.

Groarh · Answer

Ah diable, j’avais pas fait gaffe, y’a des paquets de guillemets partout ! Dans une chaîne, si tu veux placer un guillemet « html », il faut l’échapper en faisant \" . Mais le plus « propre » est quand même de le faire en DOM.
Ok, je te file un coup de main ? J’adore scripter du DOM ^^

L’élément select : http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-94282980
L’élément option : http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-70901257

var select = document.createElement("select");
select.size = 10;
select.name = "SearchList";
select.id = "SearchList";
for (var count = 0; count < rs.RecordCount; count++) {
	var option = document.createElement("option");
	option.value = rs.Records[count].ID;
	var text = document.createTextNode(rs.Records[count].Name);
	option.appendChild(text);
	select.appendChild(option);
}
limite, si j’ai bien compris comment tu as construit ton truc, tu peux baser le size de ton select sur la longueur du tableau rs.Records. Et je suppose d’ailleurs que c’est égal à rs.RecordCount. Du coup tu peux faire :

select.size = rs.Records.length;et :

for (var count = 0; count < rs.Records.length; count++) {
	// …
}
Ce qui, au final, donne ce code :

var select = document.createElement("select");
select.size = rs.Records.length;
select.name = "SearchList";
select.id = "SearchList";
for (var count = 0; count < rs.Records.length; count++) {
	var option = document.createElement("option");
	option.value = rs.Records[count].ID;
	var text = document.createTextNode(rs.Records[count].Name);
	option.appendChild(text);
	select.appendChild(option);
}
Il ne reste plus qu’à appeler appendChild(select) sur l’élément qui doit recevoir le select !

Edit : c’est du JavaScript pur, rien d’emprunté à aucune framework. Je ne connais pas jQuery, j’espère que tu n’auras pas trop de mal à adapter le code que je viens de te donner…

ordiminnie · Answer

Voir la solutions à https://www.developpez.net/forums/d810368/javascript/general-javascript/manipulation-d-objet-json/#post4654668

merci

ordiminnie · Answer

... en  plus de la très claire explication de groahr grâce à qui scripter  le DOM semble facile (incroyable !).
Merci !

ordiminnie · Answer

ça marche nikel ! J'ai quand même remplacé appendChild() par append() car ça faisait une erreur. Un select peut-il être un enfant d'un div ? Je pensais que oui mais apparemment pas, ou ça vient d'ailleurs.

Groarh · Answer

Ah oui, le simple quote… Perso je ne m’en sers jamais, pour une raison personnelle (une histoire de rechercher / remplacer avec l’apostrophe typographique).
Je ne comprends pas pourquoi appendChild ne marche pas. C’est une méthode de l’interface Node, c’est-à-dire un des degrés les plus primaires du DOM !
(interface Node)
En plus j’ai testé mon code sous FF et sous IE8 avant de le poster.

Peut-être que jQuery détourne l’usage de cette méthode pour sa cuisine interne. Quoiqu’il en soit, la méthode append que tu utilises vient de cette framework, tu as donc tout intérêt à l’utiliser :)
Note que d’après ce que je trouve sur Google, tu peux ajouter tous tes éléments à str sous forme de chaîne (à condition de faire gaffe aux quotes :P), et append se débrouille tout seul avec ça.
Ça te fait un code plus léger, mais peut-être un peu moins rapide à l’interprétation (bicoze analyse de chaîne). À toi de voir ;)

Et pour finir : je viens de vérifier, on a le droit de mettre des select dans les div. Mais la logique du truc c’est qu’autour de tout ça, quelque part, il y ait un élément form, même si ce n’est pas dans la DTD (il y a des choses trop difficiles à formuler pour une DTD…) (DTD XHTML1.0 Strict)

;)

Edit :
citation :
[…] dans ma boite, on injecte notre html de cette façon (on travaille en asp) donc je n'avais jamais vu que ça. Travailler avec jquery me force à faire les choses bien […]

Sous-entendu : asp c’est mal ! XD

ordiminnie · Answer

oops...c'est pas ce que je voulais dire 
disons que j'ai codé un peu en c# (asp.net) et puis je suis  arrivé ici où tout est en asp classic, avec des methodes pour cracher de l'html et un joyeux mélange html/js/asp/css.. (hum hum), du coup, je crois que mon esprit associera toujours asp avec "joyeux bordel" mais c'est totalement subjectif. ;-)

Manipuler un objet JSON

10 réponses

Discussions similaires