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 trial

JavaScript Handling Errors

problem 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

Check the line just above that one

 .then(res => res.json());

It ends with a semicolon when there shouldn't be one

plop you're right. I didn't see that. Thanks!