Liste déroulante dynamique

[nkordiko]

Bonjour, je souhaite alimenter un select via une base de données.
Je n'arrive pas à récupérer les données contenues dans le json car mon select m'indique undefined.

Voici mes codes je pense que ce sera plus explicite.

Mon Html

Code :

<select name="artistes" id="artists" />

Mon Js

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function populateArtists() {
 
    $.getJSON('getArtists.php', function(data) {
 
        var select = $('#artists');
        var options = select.attr('options');
        $('options', select).remove();
 
        $.each(data, function(index, array) {
            options[options.length] = new Option(array['artistes']);
        });
 
    });
 
}
 
$(document).ready(function() {
 
	populateArtists();
 
 
});

Mon Php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
$query_artists = "SELECT * FROM artists ORDER BY art_name ASC";
$artists = mysql_query($query_artists, $base) or die(mysql_error());
$row_artists = mysql_fetch_assoc($artists);
$result = array();
?>
 
<?php
do {  
$result[] = $row_artists;
} while ($row_artists = mysql_fetch_object($artists));
echo '{"artists":'.json_encode($result).'}';
?>

J'ai retourné le problème dans tous les sens et je ne vois pas ce qui cloche.

Merci d'avance pour votre aide et compréhension.

[danielhagnoul]

Bonsoir

var options = select.attr('options'); : il n'existe pas d'attribut options.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
$.getJSON('getArtists.php', function(data) {
	var objSelect = $('#artists');
 
	objSelect.empty();		
 
	$.each(data, function(i, item) {
		// debug
		console.log(i, item);
 
		// remplacer les ?? par les valeurs contenues dans l'item, par exemple item[0] et item[1]
		//objSelect.append('<option value="' + XX + '">' + YY + '</option>');
	});
});

[nkordiko]

Bonsoir danielhagnoul,

Merci pour ton aide, je récupère bien mes données que je vois bien dans la console par contre dans mon select j'ai [object Object]. Je dois mal m'y prendre pour récupérer mes données voici ce que j'ai fait

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function populateArtists() {
 
    $.getJSON('getArtists.php', function(data) {
	var objSelect = $('#artists');
 
	objSelect.empty();		
 
	$.each(data, function(i, $result) {
		// debug
		console.log(i, $result);
		objSelect.append('<option value="' + $result[0] + '">' + $result[1] + '</option>');
	});
});
 
}
 
$(document).ready(function() {
 
	populateArtists();
 
 
});

$result est la variable contenant les données que vous pouvez retrouver dans le php plus haut.

Merci d'avance.

[danielhagnoul]

Bonsoir

Attention, j'ai écrit : "par exemple item[0] et item[1]".

Je n'ai aucun moyen de connaître la structure de $result. La structure de la réponse est affichée par : console.log(i, item);

Nota bene : la variable PHP $result n'a rien à voir avec la variable JavaScript que j'ai appelée item et que vous appelé $result, c'est data qui contient le résultat envoyé par le PHP.

[nkordiko]

Bonsoir,

En effet, j'ai certainement du m'emmêler les pinceaux vu le peu de connaissance que je possède.

Je reprends en donnant de plus amples informations pour vous faciliter la tâche.

Mon Php que vous retrouvez plus haut récupère les données dans ma base de données. En l'occurrence la table artists qui a deux champs art_id(valeurs que je souhaite allouer à l'option value) et art_name (valeur que je souhaite allouer au cœur de mon select).

Dans la console $result retourne:

artists [Object { art_id="1208", art_name"Police"}, Object { art_id="1190", art_name="Toto"}, Object { art_id="1136", art_name="702"}]

qui correspond à la dernière ligne de mon php.

Code :

echo '{"artists":'.json_encode($result).'}';

Je souhaite utiliser les valeurs de art_id et art_name présente dans la console mais je ne sais comment y accèder.

Tout ce que j'ai dans mon select c'est [object Object]

Merci d'avance pour votre compréhension

[danielhagnoul]

Bonsoir

PHP envoie donc l'équivalent de : var data = {"artists":[{ art_id:"1208", art_name:"Police"}, { art_id:"1190", art_name:"Toto"}, { art_id:"1136", art_name:"702"}]};.

C'est cet "artists" qui complique un peu l'écriture !

Code :

1
2
3
4
5
6
7
8
9
$.getJSON('getArtists.php', function(data) {
	var objSelect = $('#artists');
 
	objSelect.empty();		
 
	$.each(data.artists, function(i, item) {
		objSelect.append('<option value="' + item.art_id + '">' + item.art_name + '</option>');
	});
});

[nkordiko]

Bonsoir danielhagnoul,

Un grand merci tout fonctionne!!
J'ai modifié ma dernière ligne php envoyant mes données

Code :

echo '{"artists":'.json_encode($result).'}';

echo '{"artists":'.json_encode($result).'}';
Vu que ça complique la chose pour rien.

j'ai mis ça à la place

Code :

json_encode($result);

Je vais pouvoir continuer ma découverte du jquery, j'espère que j'aurais pas à trop à t'embêter danielhagnoul et autres membres du forum.

Merci encore