Commit 0719e0fd authored by Evan GISDAL's avatar Evan GISDAL

fusion + ajout des images et titres

parent 2e7cab8d
......@@ -32,30 +32,27 @@ function loadArtists(genre,_contenu) {
.then((res) => {
if (res.ok) {
res.json()
.then((res) => { // La promesse est tenue
res = Object.entries(res);
res = res.map(([key, value]) => {
return [key, new Genre(value)];
});
res = res.map(([key, value]) => {
return {[key]: value};
});
// let ul = document.querySelector('h2+p+ul')
// console.log(ul);
// let li;
// let h3;
// let a;
// res.forEach((element) => {
// a = document.createElement('a');
// li = document.createElement('li');
// h3 = document.createElement('h3');
// console.log(element);
// console.log(element[0].name);
// li.appendChild('test');
// console.log(li);
// //ul.appendChild(li);
// })
.then((res) => {
let ul = document.querySelector('h2+p+ul')
console.log(ul);
let li;
let h3;
let a;
let img;
res.forEach((element) => {
a = document.createElement('a');
li = document.createElement('li');
h3 = document.createElement('h3');
img = document.createElement('img');
li.appendChild(a);
a.appendChild(h3);
h3.innerHTML = element.name;
img.setAttribute('src',element.photo);
img.setAttribute('alt',`picture of ${element.name}`);
li.appendChild(img);
console.log(li);
ul.appendChild(li);
})
})
......@@ -68,7 +65,6 @@ function loadArtists(genre,_contenu) {
});
}
// Fonction de remplissage du sélecteur de genre musical
function loadGenres(url){
fetch(url)
......@@ -76,10 +72,12 @@ function loadGenres(url){
if (response.ok) {
response.json()
.then((response) => { // La promesse est tenue
console.log(response);
console.log(response[0]); // Affichage du premier object de Genre
console.log(response[1]); // Affichage du second object de Genre
console.log(response[2]); // etc.
console.log(response[0]);
console.log(response[1]);
console.log(response[2]);
// On prend la balise select
let select = document.querySelector('select');
......@@ -99,9 +97,7 @@ function loadGenres(url){
select.addEventListener('change', () => {
let genreChoisi = document.querySelector('select').value;
console.log(`Vous avez choisi le genre ${genreChoisi}`);
// Finalement, la methode Array.find() qui permet de trouver le text correspondant au choix dans la comboBox
// Finalement, la methode Array.find() qui permet de trouver le text correspondant au choix dans la liste déroulante
const found = response.find(element => element.id === genreChoisi);
loadArtists(document.querySelector('select').value, found.description);
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment