Discussion :

[fredbubu65]

J'aimerai remplir une liste déroulante en lisant dans un fichier JSON. J'ai essayé pleins de code et lu beaucoup de chose sur le web en essayant de l'adapter mais je reste bloqué.
Je vais mettre mon code HTML ainsi que le code JS que j'ai testé, et un extrait de mon fichier JSON que je dois lire.

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
<div id="custom-select-class" class="custom-select" style="width:200px;" onclick="showSecondSelector()"> 
        <select id="firstDropdown" name="firstDropdown">
		<option value="">Select Class</option>
		<!--
		<option value="1">mp</option>
		 <option value="2">ci</option>
		 <option value="3">cr</option>
		 <option value="4">cin</option>
		 <option value="5">mod</option>
			-->
		  </select>
</div>

Code JS que j'ai testé :

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
<script type="text/javascript">
			$('div firstDropdown').on('click touchstart', function() {
				$.getJSON("labels.json", function(data) {
					var items = [];
					for (var valeur in data['_fields']) {
 
						var variable = data['_fields'][valeur];
 
						if (valeur == 0){
							$('body div firstDropdown').prepend('<form><select name="labels" id="labels" size="1"</select></form>');
							$('#labels').append('<option>' + variable + '</option>');
						} else {
							$('#labels').append('<option>' + variable + '</option>');
						}
					};
				});
			}
</script>

J'ai aussi testé ça:

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
let dropdown = $('#firstDropdown');  
dropdown.empty();
 
dropdown.append('<option selected="true" disabled>Select Class</option>');
dropdown.prop('selectedIndex', 0);
 
const url = 'labels.json';   
/* url du fichier JSON 
 
const url = 'labels.json';
 
// Populate dropdown with list of labels
$.getJSON(url, function (data) {
	$.each(data, function (key, entry) {
		dropdown.append($('<option></option>').attr('value', entry._fields));
	})
});

Code :

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

1
2
3
4
5
6
7
8
9
function showSelectClass() {
	$('#firstDropdown').on('click',function(){
		$.getJSON('labels.json',function(data){
			$.each(data,function(index,d){
				$('#firstDropdown').append(d._fields);
			});
		});
	});
}

Fichier JSON :

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
[
  {
    "keys": [
      "label"
    ],
    "length": 1,
    "_fields": [
      "mp"
    ],
    "_fieldLookup": {
      "label": 0
    }
  },
  {
    "keys": [
      "label"
    ],
    "length": 1,
    "_fields": [
      "ci"
    ],
    "_fieldLookup": {
      "label": 0
    }
  },
  {
    "keys": [
      "label"
    ],
    "length": 1,
    "_fields": [
      "cr"
    ],
    "_fieldLookup": {
      "label": 0
    }
  }]

En fait, ce que je veux récupérer, c'est les valeurs de "_fields" --> mp,ci,cr et remplir ma liste déroulante avec ces valeurs.

[mathieu]

cela ne nous suffit pas pour vous aider, merci d'indiquer à chaque fois :

1. ce que vous avez mis en place (ça a l'air bon pour cette partie)
2. le résultat que vous obtenez avec l'affichage des variables qui ne contiennent pas l'information prévue
3. le résultat que vous auriez souhaité

[fredbubu65]

Je vois pas ce que je peux mettre de plus !
J'ai mis le code HTML, qui à la base j'ai une liste déroulante en "dur". Ce que je veux faire c'est associer du code JavaScript/JQuery pour cette liste déroulante de façon à associer à celle-ci une fonction JS qui lit les données soit d'un fichier JSON, soit un fichier texte.

J'ai tout mis : HTML, le code JS , ainsi que mon fichier JSON. Je pense que je peux pas mettre plus !
Je continue mes recherches sur le web mais en vain pour le moment, je trouve rien, et le peu que je trouve, je teste, mais ça ne fonctionne pas.

[NoSmoking]

Bonjour,

je trouve rien, et le peu que je trouve, je teste, mais ça ne fonctionne pas.

en fait tu cherches mal

Il faudrait que tu prennes la bonne habitude de te déboguer avec un simple console.log, cela te permettrais de voir comment est composée ta réponse

Code :

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

1
2
3
$.each(data, function (index, elem) {
  console.log(index, elem);
});

ainsi tu verrais que quand tu atteints ta clé "_fields" tu récupères un array, en mixant tout ce que tu a fais tu n'en étais pas loin.

[fredbubu65]

J'ai mis un "console.log" comme tu m'as dit mais y rien qui s'affiche, donc je ne voit pas d'où peut provenir le problème !

[mathieu]

pour suivre les appels AJAX, vous pouvez utiliser l'onglet "Réseau" de la console de développement de votre navigateur.
par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

montrez-nous ce qui est envoyé et ce qui est retourné.