React/JS/TP1/Exo_API.js

/* exo fait par moi
const getuserinfo = (data) => data.results.forEach(element => {
    console.log(`${element.name.title} ${element.name.last} ${element.name.first} live in ${element.location.country} \(${element.nat}\), contact at ${element.email}`)

});


const user = async() => {
    try {
        const resp = await fetch("https://randomuser.me/api?results=10");
        const data = await resp.json(resp);
        console.log(data);
    } catch (err) {
        console.error(`Error:${err}`)
    }
}

const username = async() => {
    try {
        const resp = await fetch("https://randomuser.me/api?results=10");
        const data = await resp.json(resp);
        data.sort((a,b));
        getuserinfo(data);
    } catch (err) {
        console.error(`Error:${err}`)
    }
}

username()*/


/*version async*/

// 1. Affichez les **noms**, le **code pays** ('nat') et l'**email** des utilisateurs
// 2. Triez les utilsateurs par sexe
// 3. Affichez le drapeau à partir du code pays (`https://restcountries.com/v3.1/alpha/:code`)

async function getUsers() {
    try {
        // Récupère 10 utilisateurs
        const response = await fetch('https://randomuser.me/api?results=10');
        // Récupère les données JSON
        const data = await response.json();
        // Retourne les résultats
        const users = data.results;

        return users.map(user => ({
            name: `${user.name.first} ${user.name.last}`,
            nat: user.nat,
            email: user.email,
            gender: user.gender
        }));
    } catch (error) {
        console.error('Erreur récupération des utilisateurs:', error.message);
    }
}

async function getCountryInfo(code) {
    try {
        // Récupère les informations pour le code pays spécifié
        const response = await fetch(`https://restcountries.com/v3.1/alpha?codes=${code}`);
        // Récupère les données JSON
        const data = await response.json();
        // Retourne le résultat (le premier élément du tableau)
        return data[0];
    } catch (error) {
        console.error(`Erreur lors de la récupération des info pays ${code}:`, error.message);
    }
}

async function displayUserInfo() {
    let users = await getUsers();

    // 1. Affichez les noms, le code pays ('nat') et l'email des utilisateurs
    console.log('Utilisateurs:', users)

    // 2. Triez les utilisateurs par sexe
    const sortedUsers = users.sort((a, b) => a.gender.localeCompare(b.gender));
    console.log('Utilisateurs triés par sexe:', sortedUsers);

    // 3. Affichez le drapeau à partir du code pays
    for (const user of users) {
        const countryInfo = await getCountryInfo(user.nat);
        console.log(`Drapeau pour le code pays ${user.nat}: ${countryInfo.flag}`);
    }
}


displayUserInfo();

/*version .then*/

function getUsers() {
    console.log('log 1')
    setisLoading(true)
    fetch('https://randomuser.me/api?results=10')
        .then(response => response.json())
        .then(data => {
            console.log('log 3')
            const users = data.results;
            return users.map(user => ({
                name: `${user.name.first} ${user.name.last}`,
                nat: user.nat,
                email: user.email,
                gender: user.gender
            }));
        })
        .catch(error => {
            console.error('Erreur :', error.message);
        })
        .finally(() => {
            console.log('log 4')
        });

    console.log('log 2 ')
}

function getCountryInfo(code) {
    return fetch(`https://restcountries.com/v3.1/alpha?codes=${code}`)
        .then(response => response.json())
        .then(data => data[0])
        .catch(error => {
            console.error(`Erreur lors de la récupération des informations pour le code pays ${code}:`, error.message);
        });
}

function displayUserInfo() {
    getUsers()
        .then(users => {
            // 1. Affichez les noms, le code pays ('nat') et l'email des utilisateurs
            console.log('Utilisateurs:', users);

            // 2. Triez les utilisateurs par sexe
            const sortedUsers = users.sort((a, b) => a.gender.localeCompare(b.gender));
            console.log('Utilisateurs triés par sexe:', sortedUsers);

            // 3. Affichez le drapeau à partir du code pays
            const countryPromises = users.map(user => {
                return getCountryInfo(user.nat).then(countryInfo => {
                    console.log(`Drapeau pour le code pays ${user.nat}: ${countryInfo.flag}`);
                });
            });

            return Promise.all(countryPromises);
        })
        .catch(error => {
            console.error('Erreur lors de l\'affichage des informations utilisateur:', error.message);
        });
}

displayUserInfo();