Estoy tratando de decirle al usuario "¡Sin resultado!" cuando no hay ninguna coincidencia con su búsqueda. Pero no pude hacerlo funcionar.
enter code here
let END_POINT = `https://api.tvmaze.com/search/shows?q=${inputValue}` fetch(END_POINT) .then(response => { if (response.status === 200) { return response.json() } // throw new Error("No result!") return Promise.reject(response) }) .then(data => { //initial cotent in the content container showContent(data[0]) //forEach, display content for each click data.forEach(tvShow => { displayContent(tvShow) }) }) .catch(error => { console.log(error) })
<div class="header"> <div class="title">TV shows search engine</div> <div class="form"> <form action=""> <input type="text" name="" id="" placeholder="Dune"> <button type="submit">Search</button> </form> <p class="error">No result!</p> </div> </div>
¿Algún consejo de cómo solucionar esto?
Compruebe si data.length > 0 antes de imprimir los resultados:
let END_POINT = `https://api.tvmaze.com/search/shows?q=${inputValue}` fetch(END_POINT) .then(response => { if (response.status === 200) { return response.json() } // throw new Error("No result!") return Promise.reject(response) }) .then(data => { if(data.length> 0) { //initial cotent in the content container showContent(data[0]) //forEach, display content for each click data.forEach(tvShow => { displayContent(tvShow) }); } else { console.log("No result !"); } }) .catch(error => { console.log(error) })