Estoy aprendiendo cómo obtener correctamente una API en javascript en mi código, y tengo algunos problemas para recuperar partes específicas del cuerpo. Idealmente, quiero guardar la configuración y la parte final del cuerpo para guardarlos en una variable que se usará más adelante.
Yo escribí esto:
fetch("https://dad-jokes.p.rapidapi.com/random/joke", { "method": "GET", "headers": { "x-rapidapi-host": "dad-jokes.p.rapidapi.com", "x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793" } }) .then(res => res.json()) .then(data => console.log(data));que devuelve esto:
{ { success: true, body: [ { _id: "60dd3699212bcedc7b8720a1", setup: "I saw a poster today for a free concert for those working in public health. It said 'Frontline Only'...", punchline: "Weird. I would've thought they'd fill the whole venue.", type: "health", likes: [], author: { name: "unknown", id: null }, approved: true, date: 1618108661, NSFW: false } ] }Como se indicó anteriormente, mi deseo aquí es guardar la configuración y el remate de la broma en una variable para publicarla por separado. ¿Cómo debo hacer esto? Gracias.
Puede definir las variables para los datos que desea obtener de antemano. Como 'data.body' es una matriz, de un elemento de longitud, tenemos que acceder a ella usando data.body[0]. Luego puede asignar las variables usando los nombres de los elementos, por ejemplo, 'cuerpo[0].configuración'.
¡Esto debería funcionar! :-)
var setup; var punchline; var data = await fetch("https://dad-jokes.p.rapidapi.com/random/joke", { "method": "GET", "headers": { "x-rapidapi-host": "dad-jokes.p.rapidapi.com", "x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793" } }) setup = data.body[0].setup; punchline = data.body[0].punchline; console.log(data); console.log(setup); console.log(punchline);Creo que el problema que tienes es que fetch() es asíncrono . Por lo tanto, el código que aparece en el programa en una línea después de la instrucción fetch se ejecutará antes que la instrucción then(). Un ejemplo sencillo:
runsFirst(); fetch.then(() => runsThird()); runsSecond();Entonces, cuando intenta registrar estos valores fuera de su instrucción then(), en realidad los está registrando antes de que se establezcan. Para obtener realmente los valores, necesita:
var setup; var punchline; fetch("https://dad-jokes.p.rapidapi.com/random/joke", { "method": "GET", "headers": { "x-rapidapi-host": "dad-jokes.p.rapidapi.com", "x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793" } }) .then(res => res.json()) .then(function (data){ //Logs data setup = data.body[0].setup; punchline = data.body[0].punchline; console.log(setup, punchline); }); //Logs undefined console.log(setup, punchline);Si encuentra esta sintaxis confusa, puede usar async/await , y luego las líneas se ejecutarán más o menos en el orden en que están escritas, aunque el soporte del navegador no es tan bueno.