es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Código para la API de imágenes de Pexels no funciona – JavaScript.

12 Jul, 2023 Programación

Estoy trabajando en un complemento de Microsoft Edge, logré que la API de Pexels funcione con XMLHttpRequest, pero ahora estoy intentando convertirla a un objeto Request. He buscado varias veces soluciones pero ninguna ha funcionado.
Código:

// Obtener imagen de PEXELs
var page = Math.random()*250;
var url = "https://api.pexels.com/v1/search?query=cute+pets&page="+page.toString()+"&per_page=1";
var headers = new Headers();
headers.append('Authorization', key);
var er = new Request(url, {headers:headers})
var fr = fetch(er)
    .then(res => res.json())
var r = fr
var photos = r.photos
console.log("photos", photos)
var raw = photos[0].src.original;
console.log("raw", raw);
// document.getElementById("image").src=raw;

Salida:

photos undefined

[Cute Pet Pictures] [LOG/ERROR] TypeError: Cannot read properties of undefined (reading '0') at getImage(popup.js:15) at HTMLDocument.onBLoad(popup.js:25)

Object
 - next_page: [link]
 - page: 99
 - per_page: 1
 - photos: [{...}]
 - prev_page: [link]
 - total_results: 8000

Objeto de fotos (mostrando solo las partes necesarias para el script):

photos: Array(1)
    - 0: {... src: {original: [URL] ...} ...}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para Convertir la API de Pexels de XMLHttpRequest a Objeto Request

    Como experto en TI especializado en javascript y extensiones de Microsoft Edge, así es como sugeriría resolver el problema de convertir la API de Pexels de XMLHttpRequest a Objeto Request.

    El código que se está utilizando actualmente es el siguiente:

    // Obtener imagen de PEXELs
var page = Math.random()*250;
var url = "https://api.pexels.com/v1/search?query=lindas+mascotas&page="+page.toString()+"&per_page=1";
var headers = new Headers();
headers.append('Authorization', key);
var er = new Request(url, {headers:headers})
var fr = fetch(er)
    .then(res => res.json())
var r = fr
var photos = r.photos
console.log("photos", photos)
var raw = photos[0].src.original;
console.log("raw", raw);
// document.getElementById("image").src=raw;

    El mensaje de error muestra que photos no está definido. Una posible solución para este problema es modificar el código fetch de la siguiente manera:

    fetch(er)
    .then(res => res.json())
    .then(data => {
        var photos = data.photos;
        console.log("photos", photos);
        var raw = photos[0].src.original;
        console.log("raw", raw);
        // document.getElementById("image").src=raw;
    })

    Lo que hace esto es extraer los datos de photos de la respuesta JSON y mostrarlos en la consola. También establece la variable raw en la fuente original de la primera foto.

    ¡Espero que esta solución funcione para ti! Avísame si tienes algún otro problema.

Comments are closed.