Commit dc153d82 authored by Evan GISDAL's avatar Evan GISDAL

Conversion complete du code en async await et ajout noms prenoms et lien git

parent 180035ec
//TP3 WEB INFO3 G2
//HUMBERT Antoine et GISDAL Evan
//lien git: https://gitlab.univ-nantes.fr/E19A613A/tp3-web-xml
'use strict';
// Pas besoin d'évenement window.onload puisqu'on utilise l'attribut defer
......@@ -8,7 +12,7 @@ console.log('Almost Everything Is Asynchronous');
let urlGenre = 'http://localhost:3000/genres';
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`;
......@@ -19,39 +23,35 @@ 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
......@@ -65,7 +65,7 @@ const loadGenres = async function (url) {
else {
throw new Error('Mauvaise réponse du réseau');
}
await console.log(response);
console.log(response);
// On prend la balise select
let select = document.querySelector('select');
let option;
......@@ -79,7 +79,6 @@ const loadGenres = async function (url) {
select.add(option);
}
//select.addEventListener('change', genreChanged);
select.addEventListener('change', () => {
let genreChoisi = document.querySelector('select').value;
console.log(`Vous avez choisi le genre ${genreChoisi}`);
......@@ -90,7 +89,7 @@ const loadGenres = async function (url) {
}
catch (error) {
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
}
};
......
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