Soy nuevo en javascript y estoy tratando de hacer algunos cambios. Tengo un código de búsqueda en la barra de búsqueda y con él una llamada a API.json para obtener la información y ponerla en el sitio. Todo funciona bien, sin embargo, me gustaría modificarlo para agregar un Promise.all y poder llamar a más de una API y poder mostrarlo en el sitio. Pero todos mis intentos han fallado.
que tengo en js:
const localList = document.getElementById('localList'); const searchBar = document.getElementById('searchBar'); let hpWords = []; searchBar.addEventListener('keyup', (e) => { const searchString = e.target.value.toLowerCase(); const filteredWords = hpWords.filter((words) => { return ( words.name.toLowerCase().includes(searchString) ); }); displayCharacters(filteredWords); }); const loadCharacters = async () => { try { const res = await fetch('https://duhnunes.github.io/api/local.json'); hpWords = await res.json(); displayCharacters(hpWords); } catch (err) { console.error(err); } }; const displayCharacters = (words) => { const htmlString = words .map((character) => { return ` <div class="voc-box-content"> <h5>${character.name} - ${character.trans} [${character.type} - ${character.type2}]</h5> <p>${character.description}</p> </div> `; }) .join(''); localList.innerHTML = htmlString; }; loadCharacters(); Para mostrar en la página estoy usando <div id="localList"></div> .
En el ejemplo, estoy mostrando local.json y también me gustaría mostrar item.json con <div id ="itemList"></div> .
Ambos tienen la misma estructura de visualización en el sitio <div class="voc-box-content">...</div> .
Para obtener palabras de varias API, puede usar esto:
const searchBar = document.getElementById('searchBar'); const lists = { localList: { api: 'api1' }, miscList: { api: 'api2' }, ... }; Object.entries(lists).forEach(([id, list]) => { list.element = document.getElementById(id); }); searchBar.addEventListener('keyup', (e) => { const searchString = e.target.value.toLowerCase(); Object.values(lists).forEach((list) => { list.filteredWords = list.words.filter((word) => { return word.name.toLowerCase().includes(searchString); }); }); displayCharacters(); }); const loadCharacters = async () => { try { await Promise.all( Object.values(lists).map(async (list) => { const response = await fetch(list.api); list.words = await response.json(); }) ); displayCharacters(); } catch (err) { console.error(err); } }; const displayCharacters = () => { Object.values(lists).forEach((list) => { list.element.innerHTML = (list.filteredWords ?? list.words) .map((word) => ` <div class="voc-box-content"> <h5>${word.name} - ${word.trans} [${word.type} - ${word.type2}]</h5> <p>${word.description}</p> </div>`) .join(''); }); }; loadCharacters();