Récupérer deux données d'un fichier json [Résolu/Fermé]

Signaler
Messages postés
16
Date d'inscription
samedi 12 décembre 2015
Statut
Membre
Dernière intervention
1 janvier 2016
-
jija91
Messages postés
16
Date d'inscription
samedi 12 décembre 2015
Statut
Membre
Dernière intervention
1 janvier 2016
-
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
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934
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 .

jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934
Oupsss...
oui en effet
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.
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.
jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934 > jija91
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.
> jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019

Je te remercie pour ta réponse. C'est vraiment très sympa de ta part de t'intéresser à mon problème.
Voici les résultats :

Console Firebug

ReferenceError: reference to undefined property m.event.triggered
jquery-....min.js (ligne 3, col. 6886)
ReferenceError: reference to undefined property m.event.triggered
jquery-....min.js (ligne 3, col. 5184)
ReferenceError: reference to undefined property a.nodeName
jquery-....min.js (ligne 2, col. 31477)
ReferenceError: reference to undefined property this.sourceFileMap[href]
tabContext.js (ligne 221, col. 9)
<système>
ReferenceError: reference to undefined property i.disabled
jquery-....min.js (ligne 3, col. 8851)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 2, col. 6627)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 2, col. 20277)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 2, col. 20837)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 2, col. 20945)
ReferenceError: reference to undefined property a.result
jquery-....min.js (ligne 3, col. 8689)
ReferenceError: reference to undefined property a[h]
jquery-....min.js (ligne 3, col. 97)
ReferenceError: reference to undefined property elementArr.nodeType
inspector.js (ligne 90, col. 1)
<système>
L'évènement « key » n'est pas disponible pour certaines dispositions de clavier : key="b" modifiers="accel,alt"
ReferenceError: reference to undefined property f.data
jquery.....min.js (ligne 10, col. 12271)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 4, col. 21382)
ReferenceError: reference to undefined property k.cache
jquery-....min.js (ligne 4, col. 20671)
ReferenceError: reference to undefined property a.username
jquery-....min.js (ligne 4, col. 25328)
2
erreur de syntaxe
adresses.json (ligne 1, col. 1)
ReferenceError: reference to undefined property a[v.status]
jquery-....min.js (ligne 4, col. 19834)
SyntaxError: test for equality (==) mistyped as assignment (=)?
jquery-....min.js (ligne 4, col. 14284)
ReferenceError: reference to undefined property item.type
menu.js (ligne 111, col. 1)
<système>
ReferenceError: reference to undefined property this.tools[name]
browser.js (ligne 326, col. 5)
<système>
ReferenceError: reference to undefined property this.tabMap[panelName]
bindings.xml (ligne 86, col. 17)
<système>
ReferenceError: reference to undefined property persistedState.panelState[panel.name]
firebug.js (ligne 1250, col. 9)
<système>
ReferenceError: reference to undefined property panel.location
chrome.js (ligne 1850, col. 9)
<système>
ReferenceError: reference to undefined property this._selection
panel.js (ligne 900, col. 9)
<système>
ReferenceError: reference to undefined property state.pathIndex
domPanel.js (ligne 182, col. 13)
<système>
ReferenceError: reference to undefined property msg.app
Webapps.jsm (ligne 1130, col. 9)
<système>
ReferenceError: reference to undefined property member.scopeNameTooltip
domBaseTree.js (ligne 131, col. 9)
<système>
ReferenceError: reference to undefined property context.breakOnErrors
breakOnError.js (ligne 72, col. 9)
<système>
ReferenceError: reference to undefined property item.id
menu.js (ligne 63, col. 13)
<système>
L'évènement « key » n'est pas disponible pour certaines dispositions de clavier : key="b" modifiers="accel,alt"
L'évènement « key » n'est pas disponible pour certaines dispositions de clavier : key="b" modifiers="accel shift alt"


et pour firefox seulement :

SyntaxError: function statement requires a name autocompletion.html:29:18
ReferenceError: reference to undefined property m.event.triggered jquery-1.11.2.min.js:3:6886
ReferenceError: reference to undefined property m.event.triggered jquery-1.11.2.min.js:3:5184
ReferenceError: reference to undefined property a.nodeName jquery-1.11.2.min.js:2:31477
ReferenceError: reference to undefined property i.disabled jquery-1.11.2.min.js:3:8851
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:2:6627
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:2:20277
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:2:20837
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:2:20945
ReferenceError: reference to undefined property a.result jquery-1.11.2.min.js:3:8689
ReferenceError: reference to undefined property a[h] jquery-1.11.2.min.js:3:97
ReferenceError: reference to undefined property f.data jquery.easy-autocomplete.min.js:10:12271
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:4:21382
ReferenceError: reference to undefined property k.cache jquery-1.11.2.min.js:4:20671
ReferenceError: reference to undefined property a.username jquery-1.11.2.min.js:4:25328
erreur de syntaxe adresses.json:1:1
ReferenceError: reference to undefined property a[v.status] jquery-1.11.2.min.js:4:19834
SyntaxError: test for equality (==) mistyped as assignment (=)? jquery-1.11.2.min.js:4:14284
L'API de la console de journalisation (console.log, console.info, console.warn, console.error) a été désactivée par un script sur cette page.


Je te remercie énormément. Cela est vraiment très sympa.
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934
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).





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.
jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934
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é.
jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934 > jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019

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...).
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
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019

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.
jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934

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
Messages postés
16
Date d'inscription
samedi 12 décembre 2015
Statut
Membre
Dernière intervention
1 janvier 2016

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
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934
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 )


.
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
jordane45
Messages postés
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019
1934 > jija91

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
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
27056
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 décembre 2019

Merci infiniment jordane45,

Tu es au top. Je te remercie encore.

Très bonne soirée à toi aussi.