Necesito ayuda para crear un modal emergente condicional cuando no se encuentran resultados de una llamada a la API.
Cuando la API devuelve un resultado: longitud: 0 de la matriz, me gustaría que aparezca un modal que diga que no se encontraron resultados.
El CSS está funcionando. Este es mi HTML + JS
HTML
<div class="modal" id="myModal"> <div class="modal-content"> <span class="close">×</span> <p>Sorry no results found</p> </div> </div> <button class="btn" id="searchBtn">Search</button>JS
var modal = document.getElementById("myModal"); var btn = document.getElementById("searchBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function(){ // for (var i = 0; i < data.length; i++) { // if (data[i].length === 0) { modal.style.display = "block"; }; span.onclick = function(){ modal.style.display = "none"; }; window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; };Código de llamada de API
var newRecipe = 'https://api.spoonacular.com/recipes/findByIngredients?ingredients='+ allIngreds + '&number=10&apiKey=39791063581a4d96a908bb19745b3f64'; fetch(newRecipe) .then(response => { if (!response.ok){ throw Error("ERROR") }; return response.json(); }) .then(data => { console.log(data); });Basado en la llamada api que publicaste, debería ser algo como esto
fetch(newRecipe) .then(response => { if (!response.ok){ throw Error("ERROR") }; return response.json(); }) .then(data => { console.log(data); if (data.length === 0) { modal.style.display = "block"; } else { modal.style.display = "none"; } });