Sujet Précédent Sujet Suivant

Récupérer deux données d'un fichier json

Résolu/Fermé
jija91 Messages postés 16 Date d'inscription samedi 12 décembre 2015 Statut Membre Dernière intervention 1 janvier 2016 - 12 déc. 2015 à 23:13
jija91 Messages postés 16 Date d'inscription samedi 12 décembre 2015 Statut Membre Dernière intervention 1 janvier 2016 - 19 déc. 2015 à 20:37
Bonjour,

Je me permets de faire appel à vous car j'essaie de réaliser un système d'autocompletion en javascript. J'aimerai que lorsque dans mon formulaire s'affiche mon "FIELD9", que je mette mon "FIELD8" dans une variable pour l'utiliser ensuite.


Voici le code : 


<html>    
	
	<link href="css/easy-autocomplete.min.css" rel="stylesheet">
    <link href="css/easy-autocomplete.themes.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/prettify.js"></script>
    <link href="css/pretiffy.css" rel="stylesheet">

    <script src="js/jquery.easy-autocomplete.min.js"></script>

    <script src="js/angular.min.js"></script>
<script>
        angular.module("eacPage", []);
</script>
    <script src="js/homeController.js"></script>
    

<script>
$(document).ready(function() {
	$('body')
		//.css({position: "relative", marginBottom: "0", paddingBottom: "100px"})
		.scrollspy({ target: '#eac-affix nav' });	
});
</script>
<label>Adresse de départ n°1</label> <input id="provider-json" class="form-control" placeholder="Adresse de départ" size="30" type="text" />
<script>
				$(document).ready(function() {
										var options = {
										
						url: "json/adresses.json",

						getValue: "FIELD9",
						


						list: {
							match: {
								enabled: true
							}
						}
					};


					$("#provider-json").easyAutocomplete(options);
				});

</script>


</html>




Un morceau de mon .json 

  {
    "FIELD1":"973020010N-10",
    "FIELD2":"10",
    "FIELD3":"Faubourg l'Abri All A",
    "FIELD4":"97300",
    "FIELD5":"Cayenne",
    "FIELD6":"CAD",
    "FIELD7":"4.936580",
    "FIELD8":-52.32221,
    "FIELD9":"10 Faubourg l'Abri All A 97300 Cayenne",
    "FIELD10":""
  },


Je vous remercie d'avance pour votre retour. Toute aide est la bienvenue.

Merci beaucoup
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
15 déc. 2015 à 00:41
Bonjour,

Je pense que tu devrais trouver ton bonheur dans la doc :
http://easyautocomplete.com/guide

Je cite :
GetValue as function

Parameter getValue doesn't necessary need to be a string. If you are using more complex data, you can declare function that will be used to get value out of the element. For example above you can use: 

getValue: function(element) {
	return element.name;
}


Donc je suppose qu'un truc de ce genre devrait faire l'affaire : 

getValue: function(element) {
	return element.FIELD9;
        $("#FIELD8").val(element.FIELD8);
}


=> $("#FIELD8") etant un input HIDDEN que tu auras préalablement placé dans ton HTML ( à coté de ton input autcomplete par exemple).
Logiquement... lorsqu'une valeur sera sélectionnée... ton input hidden devrait prendre la valeur de ton FIELD8 .

0
Utilisateur anonyme
15 déc. 2015 à 08:57
Bonjour

Euh… le 
$("#FIELD8").val(element.FIELD8);
avant le return, non ? Sinon, il ne sera jamais exécuté.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
15 déc. 2015 à 11:51
Oupsss...
oui en effet
0
jija91
15 déc. 2015 à 21:55
Bonjour jordane45,

Wahooo!!! Je te remercie infiniment. C'est formidable de ta part, vraiment. Je n'ai pas encore réussi à le faire fonctionner mais ce n'est qu'une question de temps.
Tu es trop fort. Merci.

Merci aussi à le père qui a apporté sa solution.

Encore merci,et je reviens vers vous dès que ça marche.
0
jija91
17 déc. 2015 à 21:28
Bonjour jordane 45,

Avant de passer l'information du "FIELD8" en hidden, j'ai essayé de l'afficher dans ma page html.

Cependant, je n'y arrive pas. J'ai tenté d'identifier la variable car je ne comprend pas bien le javascript. 

document.write(element.FIELD8);


et 

document.write($("#FIELD8"))


Que faut-il faire pour la tester? Ou se trouve l'information du field8?

Je te remercie d'avance pour ton retour.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jija91
18 déc. 2015 à 00:22
Pour commencer, je t'invite à utiliser le navigateur FIREFOX et d'y installer le plugin FIREBUG.
Ensuite, tu ouvres firebug (ça va afficher la "CONSOLE" du naviageur.

Une fois que cela sera fait, ... tu modifies le code ainsi : 

getValue: function(element) {
       console.log(element); //le temps de tests
        $("#FIELD8").val(element.FIELD8);
	return element.FIELD9;
       
}

et tu nous dis ce que ça t'affiche dans la console.
0
Réponse 2 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 03:06
Oula.... tu as beaucoup de messages d'erreur....
Pas sûr qu'ils soient tous utiles.
Qu'as tu dans la paramétrage de ton firebug ?
Dans l'idéal, assures toi de n'avoir de coché que ceci :


Et pour être bien sûr.... tu as bien placés tes imports javascript dans la balises HEAD de ton document html ? (ou dans le BODY éventuellement).





0
Réponse 3 / 5
jija91
Modifié par jordane45 le 19/12/2015 à 12:20
Bonjour Jordane45, encore merci de ta réponse.

Voici mon code html 

<html>    
<head>
 <link href="css/easy-autocomplete.min.css" rel="stylesheet">
    <link href="css/easy-autocomplete.themes.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/prettify.js"></script>
    <link href="css/pretiffy.css" rel="stylesheet">
    <script src="js/jquery.easy-autocomplete.min.js"></script>
    <script src="js/angular.min.js"></script>
 
</head>
<script>
        angular.module("eacPage", []);
</script>
    <script src="js/homeController.js"></script>
    

<script>
$(document).ready(function() {
 $('body')
  //.css({position: "relative", marginBottom: "0", paddingBottom: "100px"})
  .scrollspy({ target: '#eac-affix nav' }); 
});
</script>
<label>Adresse de départ n°1</label> <input id="provider-json" class="form-control" placeholder="Adresse de départ" size="30" type="text" />

<script>
getValue: function(element) {
       //console.log(element); //le temps de tests
        $("#FIELD8").val(element.FIELD8);
 return element.FIELD9;
       
}
//document.write(element.FIELD8); 
</script>
<script>
    $(document).ready(function() {
          var options = {
          
      url: "json/adresses.json",

      getValue: "FIELD9",
      


      list: {
       match: {
        enabled: true
       }
      }
     };


     $("#provider-json").easyAutocomplete(options);
    });


</script>
<script>

</script>

</html>

Rapport Firebug:

SyntaxError: function statement requires a name


getValue: function(element) {



C'est en fait la définition du getValue qui lui pose problème je pense. Et peut être ai-je mal écrit le script permettant d'afficher mon field8. L'autocompletion quant à elle marche.

Merci beaucoup beaucoup jordane45.


EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 12:24
Oula.... tu fais un peu n'importe quoi !!!

Où sont les balises BODY ?
Pour rappel.. un document HTML est composé de la façon suivante (au minimum) 

 <html>
<head>
  <title> Ici le titre</title>

</head>
<body>
<!-- C'est ici que tu mets les éléments de ta page qui s'afficheront ! -->


</body>
</html>


Ensuite ... ben... 
getValue: function(element) {
       //console.log(element); //le temps de tests
        $("#FIELD8").val(element.FIELD8);
 return element.FIELD9;
       
}

est à mettre A LA PLACE du getValue de CE CODE : 
 $(document).ready(function() {
    var options = {         
      url: "json/adresses.json",
      getValue: "FIELD9"      
      list: {
       match: {
        enabled: true
       }
      }
     };

    $("#provider-json").easyAutocomplete(options);
  });


Remets tout ça au propre... et retestes.
Si ça bloques toujours, repostes nous ton code ainsi corrigé.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
19 déc. 2015 à 12:26
Et aussi.... qu'as tu fais de l'input hidden dont j'avais parlé dont l'ID serait : FIELD8 ?
Et pourquoi avoir commenté le CONSOLE.LOG alors que tant que ça ne fonctionne pas.... ben.. faudrait le laisser pour essayer de comprendre ce qui ne fonctionne pas (justement...).
0
jija91 Messages postés 16 Date d'inscription samedi 12 décembre 2015 Statut Membre Dernière intervention 1 janvier 2016 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
19 déc. 2015 à 15:37
Salut jordane45,

En effet, mon très faible niveau en javascript me fait faire des bêtises. J'ai commenté le console.log par erreur. J'ai compris maintenant qu'il me permettra d'afficher ma valeur field8. J'en suis désolé.

J'ai effectué les modifications : il n'y plus d'erreur javascript. Cependant, ma valeur field8 ne d'affiche toujours pas.

En revanche, lorsque je sélectionne une adresse, la console firebug se met à afficher tout mon fichier json dans sa console. Est-ce normal?

Je te remercie d'avance pour ton retour.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié par jordane45 le 19/12/2015 à 16:49

Cependant, ma valeur field8 ne d'affiche toujours pas.

Elle ne s'affiche pas ..... Où ?



En revanche, lorsque je sélectionne une adresse, la console firebug se met à afficher tout mon fichier json dans sa console. Est-ce normal?


Cela vient du console.log justement ....
Mais j'aimerais que tu m'en fasses un capture écran que je puisse m'en rendre compte.


Puis ensuite.... essayes de remplacer le console.log que je t'ai donné précédemment par celui là : 
console.log(element.FIELD8); //le temps de tests
0
Réponse 4 / 5
jija91 Messages postés 16 Date d'inscription samedi 12 décembre 2015 Statut Membre Dernière intervention 1 janvier 2016
19 déc. 2015 à 17:56
Il est écrit au dessus : "La limite d'inscription dans le journal d'activité Firebug a été atteinte. 57893 entrées non affichées.. "

Alors pour le console.log(element) :


Object { FIELD1="973119977H-14", FIELD2="14", FIELD3="Avenue Paul Castaing", plus...}
autocom...on.html (ligne 37)
Object { FIELD1="973119977H-15", FIELD2="15", FIELD3="Avenue Paul Castaing", plus...}
autocom...on.html (ligne 37)
Object { FIELD1="973119977H-16", FIELD2="16", FIELD3="Avenue Paul Castaing", plus...}
autocom...on.html (ligne 37)


pour le console.log(element.FIELD8) : J'ai ce type de données

-54.025154
autocom...on.html (ligne 37)
-54.029063
autocom...on.html (ligne 37)
-54.023926
autocom...on.html (ligne 37)
-54.028226
autocom...on.html (ligne 37)
-54.032723
autocom...on.html (ligne 37)


Je suis désolé et confus, je ne trouve pas l’icône pour insérer une image. En fait, la console décrit tous les field8 mais pas le field8 qui correspond à mon field9.

Merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
19 déc. 2015 à 19:17
Ceci semble fonctionner : 



<label>Adresse de départ n°1</label>
 <input id="provider-json" class="form-control" placeholder="Adresse de départ" size="30" type="text" />
 <label>FIELD8</label>
 <input id="FIELD8" class="form-control" type="text" value="">

<script type="text/javascript">
$(document).ready(function() {
    $("#provider-json").easyAutocomplete({         
      url: "json/adresses.json",
      getValue: function(element) {
        return element.FIELD9;
      },
      list: {
       match: {
        enabled: true
       },
       onClickEvent: function(K,elm) {
          var value = $("#provider-json").getSelectedItemData().FIELD8;
          console.log("FIELD9 => " + value);
          $("#FIELD8").val(value);
        }	
     }
   });
});

</script>


(Inspiré du manuel d'utilisation : http://easyautocomplete.com/guide#sec-function-selected-data )


.
0
jija91
19 déc. 2015 à 19:32
Oh wahooo. C'est réellement génial ce que tu as pu faire c'est dingue. J'en reste bouche bée.

Je tiens à te remercier infiniment, tu es vraiment trop fort. Je ne sais pas comment te remercier mais je trouve ça vraiment noble de ta part d'aider quelqu'un comme moi qui a un projet et qui ne connais pas javascript très bien.

Maintenant, je vais essayer de passer cela en input hidden comme tu l'as dit mais cette fois-ci j'essaierai de me débrouiller tout seul car j'ai abusé de ton aide.

Merci infiniment.

Bravo
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > jija91
19 déc. 2015 à 20:23

Maintenant, je vais essayer de passer cela en input hidden comme tu l'as dit

Pour ça rien de plus simple ... 
<input id="FIELD8" class="form-control" type="text" value="">

devient : 
<input id="FIELD8" class="form-control" type="hidden" value="">



PS1 : Si la question est résolue..
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

PS2 : Si tu as une "nouvelle" question, penses à ouvrir une nouvelle discussion.


Bonne soirée
0
jija91 Messages postés 16 Date d'inscription samedi 12 décembre 2015 Statut Membre Dernière intervention 1 janvier 2016 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
19 déc. 2015 à 20:37
Merci infiniment jordane45,

Tu es au top. Je te remercie encore.

Très bonne soirée à toi aussi.
0

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses