Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialrita rita
74 Pointsproblem with the catch method
Hello, I wroted the catch method as the teacher shows but I am getting this error:
app.js:14 Uncaught SyntaxError: Unexpected token .
This error correspond to the line 14: .catch(error => console.log('Looks like there was a problem', error))
const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');
// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------
//Vamos a simplificar el fetch request centralizandolo function fetchData(url){ return fetch(url) .then(checkStatus) .then(res => res.json()); //parsing response to JSON .catch(error => console.log('Looks like there was a problem', error)) }
//Con el siguiente fetch recogemos del link del API la raza convertida en formato JSON fetchData('https://dog.ceo/api/breeds/list') //.then(response => response.json()) .then(data => generateOptions(data.message)) //.catch(error => console.log('Looks like there was a problem', error))
//Con el siguiente fetch recogemos del link del API la imagen convertida en formato JSON fetchData('https://dog.ceo/api/breeds/image/random') //.then(response => response.json()) .then(data => generateImage(data.message))
// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------
//this function will check if the promise resolved with the response objetc's ok property set to true function checkStatus(response){ if (response.ok){ //if response is true the promise get resolved with the response return Promise.resolve(response); }else{ return Promise.reject(new Error(response.statusText)); } }
//La siguiente función permite introducir como html la raza obtenida del API y mostrarla como opciones
function generateOptions(data){
const options = data.map(item =>
<option value='${item}'>${item}</option>
).join(''); //Esto permite eliminar el ", " que aparece en el html después del nombre de cada raza
//Ahora introducimos en el html del id breeds (constante select) select.innerHTML = options; }
//La siguiente función permite introducir como html la imagen obtenida del API
function generateImage(data) {
const html =
<img src='${data}' alt>
<p>Click to view images of ${select.value}s</p>
;
card.innerHTML = html;
}
function fetchBreedImage(){ const breed = select.value; const img = card.querySelector('img'); const p = card.querySelector('p');
//En vez de pasar solo la url como un string uso un template literal
//por que quiero interpolar el valor (insertar) de la variable raza en el URL
fetchData(https://dog.ceo/api/breed/${breed}/images/random
)
.then(data => {
img.src = data.message;
img.alt = breed;
p.textContent = Click to view more ${breed}s
;
})
}
// ------------------------------------------
// EVENT LISTENERS
// ------------------------------------------
select.addEventListener('change', fetchBreedImage);
card.addEventListener('click', fetchBreedImage);
What is wrong with it? Thanks
2 Answers
KRIS NIKOLAISEN
54,971 PointsCheck the line just above that one
.then(res => res.json());
It ends with a semicolon when there shouldn't be one
rita rita
74 Pointsplop you're right. I didn't see that. Thanks!