Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

POST: guardando michis favoritos

10/20
Recursos

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

💡 Recomendación: mira esta clase al menos 2 veces. En la primera disfruta de mi sufrimiento, mira paso a paso todo lo que hago y ríete de los errores que tuve. Luego, la segunda vez, desarrolla los ejercicios, pero adelántate a los errores que cometí para que no te pasen también a ti.

Y ya que estamos, era en este meme en el que estaba pensando cuando celebramos que, aunque seguíamos teniendo error, al menos ahora era uno distinto:

Excelente clase, por dos cosas:

  • El contenido.

  • El debbugin.

Lo primero es obvio, pero lo segundo nos muestra como es batallar con un error, algo que nos enfrentaremos diario si nos dedicamos a esto.

Una excelente clase.

Recomiendo usar .innerText para solo incrustar texto en el span

const errorNode = document.querySelector('#error');
        errorNode.innerText = `Error: ${error.message}`;

Para estructurar mejor el código pueden usar esta nomenclatura de variables apra el fetch

const querystring = {
    image_id: 'sdsd',
}

const options = {
    method: 'POST',
    headers: { 'content-type': 'application/json' }, // tipo de archivo de la solicitud
    body: JSON.stringify(querystring),
}

const response = await fetch(URL_FAVORITES, options);

A veces el querystring se usa como data o simplemente query pero como ya estamos usando data entonces usamos querystring

Muy buena clase
Que bueno que lo dejen así, muestra realmente cómo es todo el proceso de programar en verdad. Aunque a veces no podamos mantener la actitud de Juan y nos gane el bug 😹

jajaja rayos, xD, esta clase estuvo muy chida B)

Gente si no les agrega en favoritos, revisen que la url de favorites no tenga el ?limit=2

para que les pues traer todos los favoritos que han guardado
Luego me lo agradecen 😅

Fijense que si en la URL de favoritos tienen el limite=2 se les va a complicar en visualizar los guardados!

Excelente debugging!

Hay algo que no entiendo, cuando hacemos post, donde se guarda toda esta informacion?
Subi a github pages, y abrio la misma pagina con los mismo elementos que guarde en mi localhost.

Todo funcionando

const API_URL_RANDOM = 'https://api.thecatapi.com/v1/images/search?limit=2&' //url que nos da imagenes randoms

const API_URL_getFavourites = 'https://api.thecatapi.com/v1/favourites' //url de nuestras imagenes favs
 
const API_KEY = '?api_key=f8bba90a-ad5e-480b-834b-bb39c63aaec6' //api key para hacer solicitudes http

const imageRandom = document.getElementById('image1')

const secondImageRandom = document.getElementById('image2')

const refreshButton = document.getElementById('refresh')

const fetch_api = async () => {

    const request = await fetch(`${API_URL_RANDOM}${API_KEY}`) //url de imagenes randoms
    const response = await request.json()
    console.log('random')
    console.log(response)
    const img = document.querySelectorAll('.img')

    //por cada imagen que coincida con el query selector le asignaremos la imagen que nos sale de la API 
    img.forEach((image, index) => {

        image.src = response[index].url
    })
}

const fetch_api_favourites = async () => {

    const error = document.querySelector('#error')
    const request = await fetch(`${API_URL_getFavourites}${API_KEY}`) //concatenamos la ruta
    try {

        const response = await request.json() //convertimos a un json manipulable, objeto
        console.log('favs')
        console.log(response)
        const img = document.querySelector('.favourite')
        img.src = response[0].image.url //estamos diciendole que el src de la img será la imagen que nos trae la API

    } catch(err) {

        error.classList.remove('none')
        error.classList.add('alert', 'alert-danger')
        error.textContent = `Error ${request.status}. ${err.message}`//pasamos el status code y el mensaje
    }
}

const saveFavouritesMichis = async () => {

    const saveFavourites = await fetch(API_URL_getFavourites + API_KEY, {

        method: 'POST', //declaración del metodo http
        headers: {

            'Content-Type': 'application/json' //declaramos el tipo de dato que enviaremos
        },

        //convertimos a json el dato que enviaremos ya que no sabemos si podrá leer javascript puro
        body: JSON.stringify({

            image_id: "a8s" //id de la imagen del cat
        })   
    })

    console.log(saveFavourites) //debugeamos que nos tira la api favourites, que es un arreglo en si

}


window.addEventListener('DOMContentLoaded', () => {

    window.addEventListener('load', fetch_api)
    window.addEventListener('load', fetch_api_favourites)
    refreshButton.addEventListener('click', fetch_api)
    imageRandom.addEventListener('click', saveFavouritesMichis)
    secondImageRandom.addEventListener('click', saveFavouritesMichis)

})

3:42 le informo que el nombre de la constante de michis random tiene un error tipográfico es API_URL_FAVOTITES y seria favourites