Afficher les données d'un objet

**fredbubu65** · 19/07/2018, 11h12

Bonjour,

Je suis débutant en JQuery. J'aimerai afficher des données qui se trouve dans un serveur. Pour cela, je dispose d'un fichier .js
Ce que j'aimerai afficher dans une liste déroulante, c'est l'objet data d'un $.ajax().
J'ai regardé un peu sur le net mais je ne trouve pas d'exemple sur lesquels je me baserai pour l'adaptait. Le but serait d'appeler ma méthode "callneo4j()" et de pouvoir accéder à l'objet "data:JSON.stringify...."

Code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
(function($){
		  function callneo4j(){
			var URL="http://**.***4.***.***:****/db/data/cypher";
			var USERNAME = "*****"
			var PASSWORD = "*********"
			var list_nodes = [];
			var list_links = [];
			var dic_attr = {};
			$.ajax({
				url:URL,
				type: "POST",
				headers: {
					'Content-Type': "application/json",
					"Accept": "application/json; charset=UTF-8",
					"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
				},
				data:JSON.stringify({
				   "query" : "CALL db.labels",
				   "params" : {}
				}),
 
				success: function(data) {
						$.each(data, function (key, val) {
						if (key=="data"){
							for (i = 0; i < val.length; i++) {
								list_nodes.push(val[i][0])
								};						
						} 
 
					});
				}
			});
			$.ajax({
				url:URL,
				type: "POST",
				headers: {
					'Content-Type': "application/json",
					"Accept": "application/json; charset=UTF-8",
					"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
				},
				data:JSON.stringify({
				   "query" : "CALL db.relationshipTypes()",
				   "params" : {}
				}),
 
				success: function(data) {
						$.each(data, function (key, val) {
						if (key=="data"){
							for (i = 0; i < val.length; i++) {
								list_links.push(val[i][0])
								};						
						} 					
					});
				}
			});
 
			$.ajax({
				url:URL,
				type: "POST",
				headers: {
					'Content-Type': "application/json",
					"Accept": "application/json; charset=UTF-8",
					"Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
				},
				data:JSON.stringify({
				   "query" : "CALL db.indexes()",
				   "params" : {}
				}),
 
				success: function(data) {
						$.each(data, function (key, val) {
						if (key=="data"){
							for (i = 0; i < val.length; i++) {
									key = val[i][1]
									value = val[i][2][0]
									if(dic_attr[key]){
										dic_attr[key].push(value)
									}
									else{
										dic_attr[key] = [value]
									}
								};						
						} 
						create_queries(list_links,list_nodes,dic_attr)
 
					});
				}
			});
		  }
		  $(document).ready(function() {
			callneo4j()
		  });
})(jQuery);

Code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div id="custom-select-class" class="custom-select" style="OVERFLOW: auto; width: 250px;height: 150px" onscroll="Scroll();" onclick="showSecondSelector()">  
			<!--  onChange="listeDeroulante()" Survient lorsque la valeur change donc valable pr une checkbox  -->
			<!-- Par défaut qui fonctionne : <select name="selectClass" id="selectClass"> -->	
		  <select name="selectClass" id="selectClass">
		    <option value="0" selected>Select Class</option>
			<!--
		    <option value="1">Select Class</option>
			<option value="2">Select Class</option>-->
			<option value="3">mp</option>
		    <option value="3">ci</option>
		    <option value="4">cr</option>
		    <option value="5">cin</option>
		    <option value="6">mod</option>
			<option value="7">ds</option>
			<option value="8">subata</option>
			<option value="9">ata</option>
			<option value="10">atazone</option>
			<option value="11">section</option>
			<option value="12">atasection</option>
			<option value="13">ca</option>
			<option value="14">station</option>
			<option value="15">msn</option>
			<option value="16">lo</option>
			<option value="17">stdpt</option>
			<option value="18">dassy</option>
			<option value="19">ddpt</option>
			<option value="20">requirement</option>
			<option value="21">drawing</option>
			<option value="22">effectivity</option>
			<option value="23">impact</option>
			<option value="24">generate</option>
			<option value="25">GENERATE</option>
			<option value="26">COMPOSE</option>
			<option value="27">MADE_FROM</option>
			<option value="28">BELONG_TO</option>
			<option value="29">concession</option>
			<option value="30">item</option>
			<option value="31">drawingset</option>
			<option value="32">factory</option>
		  </select>
		</div>

Merci d'avance pour aider un débutant !

Invité · 19/07/2018, 14h08

Bonjour,

dans ta fonction callneo4j(), tu as 3 appels Ajax....

Peux-tu :

expliquer plus précisément et en détails ?
mettre des commentaires / explications dans le code ?

**SpaceFrog** · 19/07/2018, 14h48

3 ajax sur la même URL ... c'est deux de trop ...

**NoSmoking** · 19/07/2018, 15h18

Bonjour,
je rajouterais que l'on a quand même l'impression de « pisser dans un violon » attendu que tu ne tiens aucunement compte des conseils qui t'ont déjà été donnés, donc je t'en donne un petit dernier lit la documentation, ce n'est jamais du temps perdu

**fredbubu65** · 20/07/2018, 09h28

En fait, j'ai 3 appels AJAX car ce qui diffère c'est la partie "data:JSON.stringify" qui accèdent à des données différentes avec "CALL db.labels; CALL db.relationshipTypes ..."

En fait, je reprends un code d'un collègue et je dois me servir de ce code pour afficher les données dans les listes déroulantes. Chaque liste déroulante affichera chacune une "query:CALL db...."

J'ai en effet, regardé sur le site de JQuery (jQuery.ajax() ...) mais ça m'aide pas, je ne vois pas comment on accède (affiche) un paramètre dans une requête ajax() comme le paramètre data et ici en locurence "query" !

Au passage, NoSmoking calme toi stp, car je prends vos conseils !!! Si c'est pour casser les gens c'est pas la peine que tu participes au sujet, car le sujet en Jquery que j'ai mis en résolu hier n'est pas la même problématique.

Je ne vois pas comment je peux expliquer autrement ma problématique. J'ai mis tous les détails que je connais à l'heure actuelle.

Invité · 20/07/2018, 10h00

Bonjour,

1-

Envoyé par fredbubu65

...Je suis débutant en JQuery...
Merci d'avance pour aider un débutant !

Déjà, quand on voit ça, et qu'on regarde ton code, on se dit que tu tentes l’ascension de l'Everest en T-shirt et sandalettes...

Il faut savoir rester humble.

2- Ton code est TROP compliqué.
Si toi-même tu n'arrives pas à expliquer clairement ce que TU as écrit, comment veux-tu qu'on comprenne à ta place ?

Et comme tu ne mets AUCUN commentaires / explications dans ton code... on ne sais même pas ce que tu cherches à obtenir au final !

Il faut donc commencer par là : expliquer clairement ce que tu veux obtenir.

3-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var URL="http://**.***4.***.***:****/db/data/cypher";

C'est censé être le chemin vers un fichier, or là, on voit un dossier...

Ce n'est pas clair du tout...

[EDIT] OK pour les 3 appels : on envoie des données différentes (data:JSON.stringify....) à un fichier "commun" à plusieurs traitements.
Cela dit, on ne sait RIEN de ce fichier de traitement...

4-

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
				data:JSON.stringify({
...
				success: function(data) {
						$.each(data, function (key, val) {
						if (key=="data"){

En fait, TOUT s'appelle "data" ??
Tu m'étonnes que tu as du mal à t'y retrouver !

5- J'en ai oublié ta question....
OUPS ! Tu n'as PAS posé de question !
C'est pour ça.....

**NoSmoking** · 22/07/2018, 10h24

Envoyé par fredbubu65

Au passage, NoSmoking calme toi stp, car je prends vos conseils !!!

Je te rassures (ou pas) je ne m'énerve pas, je suis on ne peut plus

et dieu sait qu'il est souvent nécessaire de l'être sur le forum.

Une lecture attentive de la documentation t'aurais fait comprendre que par défaut les méthodes liées à Ajax sont asynchrones et qu'à ce titre il convient de traiter le résultat de la requête dans la partie success ou encore complete (mais il me semble que cela t'a déjà été dit) et que tu n'as AUCUNE garantie de l'ordre des retours.

Tu aurais également vu que le paramètre data accepte indifféremment une chaine un objet ou un tableau, donc inutile de t'embarrasser avec un JSON.stringufy qui visiblement te pose soucis.

Donc non je ne suis pas énervé mais tout juste un peu « désespéré » que les messages ne passent pas.

Ceci étant peut être devrais tu constituer ta liste côté serveur cela te permettrais de ne pas mettre le password dans le fichier JS mais ce que j'en dis !

Donc non je ne suis pas énervé mais pour conserver ma « zenitude » je pense que je n'interviendrais plus sur tes discussions cela me semble visiblement bénéfique à tous les les deux.

Bonne continuation et courage quand même

PS : n'hésite pas à répondre à tes autres discussions en souffrance.

**Watilin** · 22/07/2018, 23h52

Envoyé par fredbubu65

En fait, je reprends un code d'un collègue et je dois me servir de ce code pour afficher les données dans les listes déroulantes. Chaque liste déroulante affichera chacune une "query:CALL db...."

J'ai en effet, regardé sur le site de JQuery (jQuery.ajax() ...) mais ça m'aide pas, je ne vois pas comment on accède (affiche) un paramètre dans une requête ajax() comme le paramètre data et ici en locurence "query" !

Je ne sais pas si j’ai bien compris ton problème, mais il n’y a pas moyen d’accéder aux paramètres de requête au sein d’une fonction success. Mais à vrai dire, tu n’en as pas besoin, car tu peux simplement mettre ces paramètres dans une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
let reqParams = {
   "query": "CALL db.labels",
   "params": {}
};
 
...
 
$.ajax({
  ...
  data: JSON.stringify(reqParams),
  ...
});

Ensuite, tu peux créer un <select> contenant les données. C’est là que je ne suis pas sûr de bien interpréter ta question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("<select>")
  .append( $("<option>").text(reqParams.query) )
  .appendTo("body");

Envoyé par NoSmoking

Tu aurais également vu que le paramètre data accepte indifféremment une chaine un objet ou un tableau, donc inutile de t'embarrasser avec un JSON.stringufy qui visiblement te pose soucis.

En fait je crois que dans le cas présent les données doivent être précisément une chaîne JSON dans le corps de la requête POST, et non pas en paramètre. Un peu comme les requêtes PUT. J’ai fait quelques tests avec toutes sortes de contentType, avec ou sans processData, et apparemment jQuery n’est pas assez débrouillard pour comprendre qu’il doit « stringifier » quand on lui passe un objet ou un tableau… Donc il faut le faire à la main.

**fredbubu65** · 20/08/2018, 11h06

Je n'y arrive pas, donc je clôture cette discussion. Merci à tous pour votre contribution

Afficher les données d'un objet

jQuery

Vue hybride

Discussions similaires

Partager

Partager