Bonjour, j'essaie de créer un WebApp de recherche d'informations basé sur l'API à l'aide de JS. Alors voici la fonction où je reçois l'erreur L'erreur principale est observée à $ {data.article.map (fonction (Fonction (post) { que quelqu'un pourrait suggérer Ce qui pourrait être la raison éventuelle de cela? Merci 
4 Réponses :
Que ce qui se passe est que la section Document.getElementyID est appelée asynchrone, peut-être à un moment où les données n'ont rien renvoyé, ou lorsque la variable de l'article n'est même pas déclarée, vous pouvez essayer ceci:
async function getData() {
const res = await fetch(url);
const data = await res.json();
populateList(data);
}
function populateList(article) {
const innerHTML = article.map(post => `
<ul id="news-article" style="list-style-type:none;">
<li class="article">
<div class="card mb-2">
<img class="article-image" class="card-img-top" src="${post.urlToimage}" alt="Card image cap">
<div class="card-body">
<h2 class="article-title" class="card-title">${post.title}</h2>
<p class="article-description" class="card-text">${truncateString(post.selftext, 100)}</p>
<a class="article-link" href="${post.url}" target="_blank" class="btn btn-primary">Read More</a>
<hr>
<span class="article-author" class="badge badge-secondary">Subreddit: ${post.subreddit}</span>
<span class="badge badge-dark">Score: ${post.score}</span>
</div>
</div>
</li>
</ul>
`);
document.getElementById('container').innerHTML = innerHTML;
}
Comment une section de code dans sa fonction peut-elle être appelée asynchrone?
Je ne sais pas pourquoi cela a été évité. Certainement, la voie à suivre lorsque vous essayez de faire une extraction avec ASYNC (par opposition à .Chen ). À la première lecture, il m'a semblé que l'instruction .MAP de l'auteur a été licenciée avant que l'appel de l'API soit définie et que les données ont été définies, comme la clause .map n'avait pas de < code> attendre devant celui-ci.
J'ai essayé le code ci-dessus mais rien n'est retourné dans l'écran de sortie une fois que le bouton de recherche est touché.
Vous pouvez également faire cela sans le async code> et attendre code> des mots-clés et utilisez simplement un rappel dans un .Chen code> déclaration, comme ceci:
function fetchUsers(searchTerm, searchLimit, sortBy){
let url=`some url based on params`;
fetch(url)
.then( res => res.json() )
.then( data => populateList(data) )
}
function populateList(data) {
const innerHTML = data.articles.map(post => `
<ul id="news-article" style="list-style-type:none;">
<li class="article">
<div class="card mb-2">
<img class="article-image" class="card-img-top" src="${post.urlToimage}" alt="Card image cap">
<div class="card-body">
<h2 class="article-title" class="card-title">${post.title}</h2>
<p class="article-description" class="card-text">${truncateString(post.selftext, 100)}</p>
<a class="article-link" href="${post.url}" target="_blank" class="btn btn-primary">Read More</a>
<hr>
<span class="article-author" class="badge badge-secondary">Subreddit: ${post.subreddit}</span>
<span class="badge badge-dark">Score: ${post.score}</span>
</div>
</div>
</li>
</ul>
`);
document.getElementById('container').innerHTML = innerHTML;
}
fetchUsers(searchTerm, searchLimit, sortBy);
Le code ci-dessus renvoie 400 mauvaise demande à l'URL de l'API et à l'article.MAP n'est pas une erreur de fonction
Avez-vous eu la peine de mettre dans la chaîne de modèle URL appropriée ou avez-vous simplement copié et coller mon code ...?
Hey Seth, de la mesure j'ai mis la bonne URL.
Je ne sais pas pourquoi vous obtenez la 400 mauvaises erreurs de demande alors ...
Le problème (d'observer l'erreur dans la console) est que votre code tente d'accéder à une propriété qui n'existe pas.
sans accès aux données exactes que vous utilisez, il serait impossible de vous informer de ce que le problème exact est. Cependant, voici quelques étapes que je prends pour diagnostiquer le problème:
débogueur ) ou un console.log (données) juste après DATA est attribué afin que vous puissiez l'observer .
- Soit cliquez sur la variable DATA dans les outils de développement de votre navigateur ou vérifiez les hypothèses que votre code fait de manière programmatique.
en termes de vérification programmée des hypothèses de votre code:
- Vérifiez que
Data est un objet en exécutant typeof Data doit renvoyer objet
- Vérifiez que
Data a en fait une propriété article en exécutant objet (données). ShasownProperty ("article")
- Vérifiez que
data.article est un tableau en exécutant array.isarray (data.article)
- Vérifiez que chaque article dans dans
Data a un Selftext , SUBREDDIT , score (à l'aide de l'étape 2)
Je suppose que vous trouverez un désalignement entre votre code et les données de ce processus. Sinon, j'aimerais savoir où vous atterrissez.
Le seul moyen de réduire et de trouver le problème est de d'abord écrire le code de manière propre.
Je suggérerais de casser votre code dans des pièces gérables et essayez des fonctionnalités de débogage dans le navigateur avec débogueur strong> ou console.log () stry> fonctionne vraiment bien. P> Il existe encore de meilleures options telles que TDD où vous pouvez écrire votre code et le tester avec L'aide du code pour obtenir plus de confiance avec des outils tels que JEST P> NOTE: pseudo code
function getPosts() {
return posts
}
function renderPost(post) {
return `<div>${post}</div> `
}
function render() {
const posts = getPosts()
console.info('post -> ', posts)
const postsMarkup = posts.map((post) => renderPost(post)).join('');
console.info('postsMarkup -> ', postsMarkup)
document.getElementById('container').innerHTML = postMarkup
}
Peut-être vérifier si
données n'est pas vide?Qu'est-ce que
res.json () retour? Y a-t-il un.article là-bas? Est-ce vide?Montrez votre réponse API s'il vous plaît.
J'ai essayé de vérifier les données avec console.log et renvoie les données de l'API correctement dans la console.
Essayez un peu de déboguer votre code. Je recommande d'ajouter
débogueur; ouconsole.log (données) aprèsconst données = ... et voyez ce qui est à l'intérieur de la variable de données. Alors veuillez nous montrer l'exemple de la façon dont les donnéesQuoi qu'il en soit, votre article est vide c'est pourquoi il est indéfini. Nothing peut être mappé.
Ajouter
console.log (json.stringify (données)) après votre Data attribution pour voir ce que vous avez vraiment. Clairementdata.article est indéfiniPourquoi pas seulement les données.map directement?
La réponse a un
non définiarticle , êtes-vous sûr que la demande est correcte?Pourriez-vous insérer la réponse dans la question?
Fixation de la capture d'écran de la console.log (données). Aussi essayé d'ajouter Console.log (json.stringify (données))
😄 Vous avez une faute de frappe. Au lieu de "données.article.map", vous devez taper "Data.article S .MAP".
Ma bonté ne me dis pas que le commentaire de Misir est où c'est à ...
C'est pourquoi l'affichage de la réponse est utile, lol.
J'ai essayé de le renommer aux articles mentionnés par Misir, mais cela ne semble pas fonctionner non plus.