Directly use find in articleTmpl

This commit is contained in:
Andrea Fazzi 2024-08-08 13:50:54 +02:00
parent 7ce46de4e9
commit 753123e7a7

View file

@ -1,9 +1,9 @@
let app = document.querySelector('#app'); let app = document.querySelector('#app');
let endpoints = { let endpoints = [
articles: 'https://vanillajsacademy.com/api/dragons.json', 'https://vanillajsacademy.com/api/dragons.json',
authors: 'https://vanillajsacademy.com/api/dragons-authors.json' 'https://vanillajsacademy.com/api/dragons-authors.json'
} ];
let articleTmpl = function (item, authors) { let articleTmpl = function (item, authors) {
return ` return `
@ -12,7 +12,7 @@ let articleTmpl = function (item, authors) {
<em>${item.pubdate}</em> <em>${item.pubdate}</em>
<details> <details>
<summary>by ${item.author}</summary> <summary>by ${item.author}</summary>
<p>${function () { return authors.find(function (author) { return author.author === item.author} )}().bio}</p> <p>${authors.find(function (author) { return author.author === item.author} ).bio}</p>
</details> </details>
<p>${item.article}</p> <p>${item.article}</p>
</article> </article>
@ -24,7 +24,7 @@ async function getArticlesAndAuthors() {
app.innerHTML = 'Fetching all articles and authors...'; app.innerHTML = 'Fetching all articles and authors...';
try { try {
let responses = await Promise.all([fetch(endpoints.articles), fetch(endpoints.authors)]); let responses = await Promise.all(endpoints.map( function (endpoint) { return fetch(endpoint); } ));
let articlesAndAuthors = await Promise.all(responses.map(async function (response) { let articlesAndAuthors = await Promise.all(responses.map(async function (response) {
if (!response.ok) throw response.status; if (!response.ok) throw response.status;