Cet extrait de code fonctionne bien, mais je veux connaître la logique derrière l'instruction if dans la fonction updateList? Je sais pourquoi j'obtiens tous les pays lorsque la valeur de sélection est à tous, mais lorsque j'ai choisi une autre valeur dans une liste de sélection comme l'Océanie, je n'obtiens que les pays de cette région. Comment ce simple opérateur logique ou peut-il filtrer le reste des pays et renvoyer uniquement une région spécifique? J'apprécierais que quelqu'un puisse m'expliquer étape par étape comment fonctionne toute cette fonction updateList?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<h3>Where in the world?</h3>
<i class="fas fa-moon">Dark Mode</i>
</header>
<nav>
<!-- Search input -->
<div class="search">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search for a country" id="searchInput">
</div>
</nav>
<main>
<!-- Filter Countries -->
<select name="Filter by Region" id="regionMenu">
<option value="all">Filter by Region</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="Oceania">Oceania</option>
</select>
<div class="result">
</div>
</main>
<script src="main.js"></script>
</body>
</html>
const regionMenu = document.querySelector('#regionMenu');
const result = document.querySelector('.result');
const countryUrl = 'https://restcountries.eu/rest/v2/all';
let countries;
fetch(countryUrl)
.then(response => response.json())
.then(json => {
countries = json;
// console.log(countries);
updateList();
})
.catch(err => console.log(err));
function updateList() {
let output = '';
for(let i = 0; i < countries.length; i++) {
if(regionMenu.value === 'all' || regionMenu.value === countries[i].region) {
output += `
<div>
<img src=${countries[i].flag} width="160px" height="80px">
<ul>
<li> Name: ${countries[i].name}</li>
<li> Population: ${countries[i].population}</li>
<li> Region: ${countries[i].region}</li>
<li> Capital: ${countries[i].capital}</li>
</ul>
</div>
`;
}
}
result.innerHTML = output;
}
regionMenu.addEventListener('change', updateList);
4 Réponses :
Vous êtes probablement induit en erreur par le fait que ce code n'utilise pas correctement map . Tout d'abord, répondez à votre question:
Comment ce simple opérateur ou logique peut filtrer le reste des pays et renvoyer uniquement une région spécifique?
Si la condition est fausse, le rappel map ne fait rien. Si la condition est vraie, elle s'ajoute à la variable output .
Alors, qu'en est-il de l'utilisation incorrecte de map ? Malheureusement, quelqu'un enseigne la map comme un itérateur général pour les tableaux. Ça ne l'est pas. map crée un nouveau tableau à partir des valeurs de retour qu'il obtient de son rappel. Si vous n'utilisez pas ce nouveau tableau, map est tout simplement le mauvais outil à utiliser - utilisez forEach ou for-of ou l'une des nombreuses autres façons de parcourir un tableau .
Mais comme ce code utilise map , vous pensiez probablement que map faisait autre chose que de simplement parcourir le tableau. Ce n'est pas le cas, il a simplement été mal utilisé.
Comme je l'ai dit, sur la base du code vu sur Stack Overflow au cours des 18 derniers mois environ, quelqu'un doit enseigner activement cette mauvaise utilisation de la carte , ce qui est malheureux.
Voici quelques exemples de façons de mettre à jour updateList -
Utilisation de forEach code >:
function updateList() {
result.innerHTML = countries.filter(
country => regionMenu.value === 'all' || regionMenu.value === country.region
).map(country => `
<div>
<img src=${country.flag} width="160px" height="80px">
<ul>
<li> Name: ${country.name}</li>
<li> Population: ${country.population}</li>
<li> Region: ${country.region}</li>
<li> Capital: ${country.capital}</li>
</ul>
</div>
`
).join("");
}
Utilisation de for-of:
function updateList() {
result.innerHTML = countries.map(country => {
if (regionMenu.value === 'all' || regionMenu.value === country.region) {
return `
<div>
<img src=${country.flag} width="160px" height="80px">
<ul>
<li> Name: ${country.name}</li>
<li> Population: ${country.population}</li>
<li> Region: ${country.region}</li>
<li> Capital: ${country.capital}</li>
</ul>
</div>
`;
}
return "";
}).join("");
}
Utilisation de map correctement en renvoyant toujours une valeur significative et en utilisant .join ("") sur le tableau résultant:
function updateList() {
let output = '';
for (const country of countries) {
if (regionMenu.value === 'all' || regionMenu.value === country.region) {
output += `
<div>
<img src=${country.flag} width="160px" height="80px">
<ul>
<li> Name: ${country.name}</li>
<li> Population: ${country.population}</li>
<li> Region: ${country.region}</li>
<li> Capital: ${country.capital}</li>
</ul>
</div>
`;
}
}
result.innerHTML = output;
}
Utilisation du filtre , puis map , puis join:
function updateList() {
let output = '';
countries.forEach(country => {
if (regionMenu.value === 'all' || regionMenu.value === country.region) {
output += `
<div>
<img src=${country.flag} width="160px" height="80px">
<ul>
<li> Name: ${country.name}</li>
<li> Population: ${country.population}</li>
<li> Region: ${country.region}</li>
<li> Capital: ${country.capital}</li>
</ul>
</div>
`;
}
});
result.innerHTML = output;
}
Merci l'homme pour ces informations utiles, je suis relativement nouveau dans le javascript et il est parfois difficile d'attraper ces erreurs non visibles, je l'ai remplacé par une boucle for.
Chaque fois que la fonction updateList () est appelée, elle crée une nouvelle variable sortie vide.
Ensuite, avec la carte , il parcourt les objets pays. Pour chaque objet, il examine si la valeur de l'entrée select est all, ou si la valeur de l'option sélectionnée est la même que la région de l'élément actuel.
Si all est sélectionné, la condition if est évaluée comme vraie pour tous les éléments, ajoutant ainsi chacun à la variable de sortie.
Si ce n'est pas tout, mais que la valeur sélectionnée est équivalente à la région de l'objet courant, alors l'objet courant est une correspondance et le div avec les clés nécessaires de l'objet est ajouté à la variable de sortie.
À la fin, cette variable de sortie est ajoutée au résultat div .
Merci mec, belle élaboration de pseudo-code de cette fonction de mise à jour.
Image la structure des pays est un tableau avec l'objet uniquement avec region et nom .
Par exemple, j'ai ce tableau:
australia: south america === oceania (False) fiji: south america === oceania (False) Samoa: south america === oceania (False) peru: south america === south america (True) brazil: south america === south america (True) argentina: south america === south america (True) Res: [peru, brazil, argentina].
Vous allez maintenant mapper tous les tableaux chacun par chaque élément avec l'instruction if qui a dit:
L'opérateur ou || a dit qu'une seule partie sera vraie à passer.
Si vous sélectionnez le regionMenu.value comme "all" , tous les pays seront passés dans la première section du conditionnel (1).
Sinon, si vous sélectionnez une autre valeur comme "oceania" la première partie sera toujours fausse oceania === all => False (1). Le filtre dépendra donc de la deuxième partie (2):
australia: oceania === oceania (True) fiji: oceania === oceania (True) Samoa: oceania === oceania (True) peru: oceania === south america (False) brazil: oceania === south america (False) argentina: oceania === south america (False) Res: [australia, fiji, Samoa].
Comme autre exemple, si la valeur de regionMenu.value est "amérique du sud" les résultats seront:
const countries = [
{region: "oceania", name: "australia"},
{region: "oceania", name: "fiji"},
{region: "oceania", name: "Samoa"},
{region: "south america", name: "peru"},
{region: "south america", name: "brazil"},
{region: "south america", name: "argentina"},
];
Encore une fois, merci à tous d'avoir pris votre temps et de m'avoir fourni d'excellentes informations. Habituellement, ce monde de la programmation peut être très négatif, mais je suis heureux d'avoir rejoint cette grande communauté. Passez une bonne journée à tous!