Discussion :

[Invité]

Bonjour,

je suis actuellement en train de bricoler du javascript avec du JSON et je rencontre une difficulté que je n'arrive pas à résoudre.

je souhaiterais simplement recuperer des datas du json suite à un click sur un bouton.


actuellement mon script fonctionne comme cela :
GETJSON-> Génération d'un menu 'select' + bouton -> get element onclick -> execution d'une fonction

le data.json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
[
  {
    "variete": "petit pois",
    "image": "ppois.jpg",
    "rayon": 5
  },
  {
    "variete": "carotte",
    "image": "carotte.jpg",
    "rayon": 6
  }
]

la partie génération du menu 'select',
dans cette partie , je recupere le json et crée un petit menu deroulant

Code javascript :

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
(function() {
    $(document).ready(function() {
        var url = "data.json";
        $.getJSON(url, function(json) {
            var select = $("<select></select>").attr("id", "menuselect").attr("name", "image");
            $.each(json, function(index, json) {
                select.append($("<option></option>").attr("value", json.image).text(json.variete));
            });
            $("#container").html(select);
            var sel = document.getElementById('menuselect');
            document.getElementById('valeur').onclick = function() {
                fonction_post_click();
            }
        });
    });
}());

et là ou je bloque c'est que dans la partie function_post_click() , je n'arrive pas a reussir et comprendre comment , recuperer des data en fonction de l'id du menuselect .

Code javascript :

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

1
2
3
4
5
 
  (fonction_post_click(){
	   var sel = document.getElementById('menuselect'); //je recupere le click
// mais maintenant je souhaiterais par exemple avoir la donnée 'rayon' mais comment ??
})

j'espere etre assez precis , je vous remercie de votre aide .

Bonne journée

[NoSmoking]

Bonjour,

• le premier constat est que mélanger, dans le même code, jQuery et JS-Vanilla n'est pas source de sérénité.

• Ceci étant, si tu veux pouvoir afficher la donnée « rayon » il faut bien à un moment que tu la références quelque part, ce qui n'est pas le cas.

• Cette ligne

Code :

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

var sel = document.getElementById('menuselect');

et inutile attendu que tu connais déjà ton <select>, c'est celui que tu as crée juste avant

Code :

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

var select = $("<select></select>").attr("id", "menuselect").attr("name", "image");

• A quoi se réfère ce code

Code :

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

1
2
3
document.getElementById('valeur').onclick = function() {
    fonction_post_click();
}

d'où sort cet élément « valeur » ?

[Invité]

merci pour ton retour , j'ai un peu nettoyer le code pour plus de visibilité .
(la donné "valeur" est l'id html du bouton, representé par showVal ci-dessous et sur jsfiddle)

Code javascript :

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
$(document).ready(function(){        
var url = "data.json";
	$.getJSON(url, function(json) {
	var select = $("<select></select>").attr("id", "menuselect").attr("name", "image");
		$.each(json,function(index,json){
		select.append($("<option></option>").attr("value", json.image).text(json.variete));
		});     
	$("#container").html(select); //fin de la generation du menu html select
 
        var sel = document.getElementById('menuselect'); //test pour retour visuel
	var el = document.getElementById('display');//test pour retour visuel
		document.getElementById('showVal').onclick = function () {//test pour retour visuel
		el.value = sel.value;//test pour retour visuel
		fonction_post_click();//test pour retour visuel
		}//test pour retour visuel
		document.getElementById('showTxt').onclick = function () {//test pour retour visuel
		el.value = sel.options[sel.selectedIndex].text;//test pour retour visuel
		}//test pour retour visuel
	});
});

Ma question c'est comment récupérer dans ma fonction "fonction_post_click();" la valeur sélectionne lors du clic ?

j'ai posé le script jsfiddle : https://jsfiddle.net/25dmnp7v/1/

Merci de votre aide

[NoSmoking]

j'ai un peu nettoyer le code pour plus de visibilité .

ça c'est ton point de vue !

Cela n'a rien changé car à aucun moment tu ne stockes ta donnée rayon, elle n'est donc pas disponible.

Une solution est d'utiliser la méthode data de jQuery pour garder cette information, ou l'objet complet

Code :

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

1
2
3
4
5
6
7
8
$.each(json, function(index, json) {
    select
        .append($("<option></option>")
        .attr("value", json.image)
        .data("rayon", json.rayon)        // la valeur du rayon
        .data("json", json)               // l'objet complet
        .text(json.variete));
});

Pour la lecture il te suffit de créer

Code html :

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

<input type="button" id="showData" value="data rayon" />

et d'ajouter ce morceau de code par exemple

Code :

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

1
2
3
4
5
6
$("#showData").on("click", function() {
    var oOption = $("#menuselect option:checked");
    var valeur = oOption.data("rayon");
    console.log(oOption.data("json"));
    $("#display").val(valeur);
});

[Invité]

Ok, je vois bien le fonctionnement jquery de recuperation du click avec option selectionnée.

La bonne nouvelle c'est que tu viens de me montrer que l'on peux faire passer l'ensemble de l'array ( json)
avec comme sortie console :

Code :

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

Object { variete: "petit pois", image: "ppois.jpg", rayon: 5 }

De là j'ai 2 questions ,

- Comment naviguer dans le tableau json "oOption.data("json")" et ne sortir que rayon par exemple?

2eme question ,

- Comment recuperer ces data dans une autre fonction , exemple :

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
 
$("#showData").on("click", function() {
    var oOption = $("#menuselect option:checked");
    var valeur = oOption.data("rayon");
    $("#display").val(valeur);
 // on à bien recu le choix de l'utilisateur, je lance une fonction de traitement 
    fonction_post_click();	
 
}); 
 
 
function fonction_post_click(){
	//traitement post click avec les data selectionné par l'utilisateur
 
alert (json); //  json is not defined car j'arrive pas à le passer d'une fonction à l'autre
})

Encore une fois Merci de ton aide , temps et Explication .

Greg

[NoSmoking]

- Comment naviguer dans le tableau json "oOption.data("json")" et ne sortir que rayon par exemple?

Le plus simplement du monde

Code :

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

1
2
3
valeur = nomObjet.propriete
// autre méthode parfois utile
valeur = nomObjet["propriete"]

- Comment recuperer ces data dans une autre fonction , exemple :

Le plus simplement du monde en passant l'objet, ou la valeur, en paramètre à la fonction
pour l'appel

Code :

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

fonction_post_click(valeur);

et pour la fonction

Code :

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

1
2
3
function fonction_post_click(param){
  console.log(param);
})

Nota : c'est quand même le b.a. ba du langage, à (re)voir donc

[Invité]

effectivement y a beaucoup de chose à revoir mais grace à toi j'ai appris pas mal aujourd'hui ! je te remercie de ton aide !