Manipuler un objet JSON [Résolu/Fermé]

Signaler
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
-
 ordiminnie -
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+"<br />"
}

//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 <select> comme le montre le code suivant.

[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) {

// create the recordset object
var rs = eval(msg);

if ( rs ) { // has a non-null value
// get the data from the record
var str = ""
str += "<select size=""10"" name=""SearchList"" id=""SearchList"" >";
for ( var count = 0 ; count < rs.RecordCount ; count++ ) {
str += "<option value=""" + rs.Records[count].ID + """>"
str += rs.Records[count].Name
str += "</option>"
}
str += "</select>";

$("#LST").append(""+str);
}
}
})
/code

A ce moment, j'ai une erreur dans firebug:
missing ; before statement
str += "<select size=""10"" name="...event) == 13){destMileage(ActiveControlI...

Apparemment, je n'ai pas le droit de créer un string contenant des balises ? (j'ai essayé aussi en mettant simplement un div + id autour de mon premier exemple et j'obtiens la même erreur). Comment faire alors pour mettre en forme mon objet ?
Si je dois utiliser des fonctions spécifiques au DOM pour créer au fur et à mesure mon select, quelqu'un peut-il me donner un lien de ressources ?

Merci de votre aide !!

10 réponses

Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
184
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 !
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
17
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 !
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
184
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.
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
17
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.
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
184
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…
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
17
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
17
... en plus de la très claire explication de groahr grâce à qui scripter le DOM semble facile (incroyable !).
Merci !
Messages postés
219
Date d'inscription
lundi 1 août 2005
Statut
Membre
Dernière intervention
5 juillet 2016
17
ç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.

Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
184
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
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. ;-)