...
 
Commits (5)
//TP 3 WEB
//Travail en binome : GISDAL Evan et HUMBERT Antoine
//lien git : https://gitlab.univ-nantes.fr/E19A613A/tp3-web-xml
//TP3 WEB INFO3 G2
//HUMBERT Antoine et GISDAL Evan
//lien git: https://gitlab.univ-nantes.fr/E19A613A/tp3-web-xml
'use strict';
......@@ -11,14 +11,9 @@
// Affichage d'un message au choix
console.log('Almost Everything Is Asynchronous');
let url = 'http://localhost:3000/genres';
let urlGenre = 'http://localhost:3000/genres';
// function genreChanged() {
// console.log(`Vous avez choisi le genre ${document.querySelector('select').value}`);
// }
function loadArtists(genre, _contenu) {
async function loadArtists(genre, _contenu) {
// Modification du h2 pour correspondre avec le genre sélectionné
let h2 = document.querySelector('h2');
h2.textContent = `Top ${genre} artists`;
......@@ -29,89 +24,74 @@ function loadArtists(genre, _contenu) {
console.log(p);
// Remplissage ul après h3
fetch(`http://localhost:3000/genres/${genre}/artists`)
.then((res) => {
if (res.ok) {
res.json()
.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);
});
});
}
})
.catch(function (error){ // Promesse non tenue => Traitement de l'erreur avec la méthode catch
try {
let res = await fetch(`http://localhost:3000/genres/${genre}/artists`);
if (res.ok) {
res = await res.json();
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);
});
}
}
catch (error) {
console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
});
}
}
// Fonction de remplissage du sélecteur de genre musical
function loadGenres(url){
fetch(url)
.then((response) => {
if (response.ok) {
response.json()
.then((response) => { // La promesse est tenue
console.log(response);
console.log(response[0]);
console.log(response[1]);
console.log(response[2]);
// On prend la balise select
let select = document.querySelector('select');
let option;
//On remplit la balise select avec des balises options
for (let i = 0; i < response.length; i = i + 1) {
option = document.createElement('option');
option.textContent = response[i].name;
option.value = response[i].id;
console.log(option);
select.add(option);
}
const loadGenres = async function (url) {
// Chargement des données sur le serveur...
try {
let response = await fetch(url);
if (response.ok) {
response = await response.json();
}
else {
throw new Error('Mauvaise réponse du réseau');
}
console.log(response);
// On prend la balise select
let select = document.querySelector('select');
let option;
//On remplit la balise select avec des balises options
for (let i = 0; i < response.length; i = i + 1) {
option = document.createElement('option');
option.textContent = response[i].name;
option.value = response[i].id;
console.log(option);
select.add(option);
}
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 liste déroulante
const found = response.find(element => element.id === genreChoisi);
loadArtists(document.querySelector('select').value, found.description);
});
}
catch (error) {
console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
}
};
console.log(select);
//select.addEventListener('change', genreChanged);
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 liste déroulante
const found = response.find(element => element.id === genreChoisi);
loadArtists(document.querySelector('select').value, found.description);
});
})
.catch((error) => { // Promesse non tenue => Traitement de l'erreur avec la méthode catch
console.log('Il y a eu un problème avec la récupération de données: ' + error.message);
});
}
else {
console.log('Mauvaise réponse du réseau');
}
})
.catch(function (error){ // Promesse non tenue => Traitement de l'erreur avec la méthode catch
console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
}); // Astuce : Pour tester le traitement d'erreur => arreter npm
}
loadGenres(url);
\ No newline at end of file
loadGenres(urlGenre);
\ No newline at end of file