Struggling to retrieve the data from a RESTful API?

Question

Struggling to retrieve the data from a RESTful API?

I'm currently learning how to fetch an API in javascript and I'm encountering some difficulties in extracting specific parts of the response body. My goal is to store the setup and punchline of a joke in variables for later use.

Here is the code I have written:

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));

This code snippet returns the following response:

{
{
  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
    }
  ]
}

My objective is to extract and save the setup and punchline of the joke from the response for individual use. What would be the best approach to achieve this? Thank you.

javascript json fetch

Answer 1

Answer №1

Prior to fetching the data, it's important to define the variables you'll be using. Since 'data.body' is an array with a single element, you must access it via data.body[0]. After that, you can assign the variables using the element names, such as 'body[0].setup'.

This approach should do the trick! :-)

let setup;
let punchline;

const 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);

Answer 2

Prior to fetching the data, it's important to define the variables you'll be using. Since 'data.body' is an array with a single element, you must access it via data.body[0]. After that, you can assign the variables using the element names, such as 'body[0].setup'.

This approach should do the trick! :-)

let setup;
let punchline;

const 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);

Answer 3

Answer №2

It seems like the issue you're experiencing is due to the asynchronous nature of fetch(). This means that code following the fetch statement will run before the then() statement. Here's a simple example to illustrate:

runsFirst();
fetch.then(() => runsThird());
runsSecond();

Therefore, when you try to log these values outside the then() statement, you're actually logging them before they've been set. To properly retrieve the values, you should do the following:

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);

If you find this syntax confusing, you can explore async/await as an alternative. This allows for more sequential execution of code, although browser support may vary.

Answer 4

It seems like the issue you're experiencing is due to the asynchronous nature of fetch(). This means that code following the fetch statement will run before the then() statement. Here's a simple example to illustrate:

runsFirst();
fetch.then(() => runsThird());
runsSecond();

Therefore, when you try to log these values outside the then() statement, you're actually logging them before they've been set. To properly retrieve the values, you should do the following:

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);

If you find this syntax confusing, you can explore async/await as an alternative. This allows for more sequential execution of code, although browser support may vary.

Struggling to retrieve the data from a RESTful API?

Answer №1

Answer №2

Similar questions

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

What steps can be taken to prevent the browser from freezing when loading JSON via an ajax request?

What could be causing my list of files to not properly append to FormData?

Can I trust the security of my credentials if they are able to be logged in the console

Tips for causing Jackson to throw an exception directly when deserialization mapping fails

Is there a way to display customized values on a particular column in a Vuetify table?

Access scope information when clicking with ng-click

Utilizing jQuery Autocomplete to access JSON data via an API

Reorganizing JSON data with ES6 techniques

What causes an ajax request to submit "none" as the value of a dom element?

Implementing logic with multiple columns in JavaScript

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

The sequence of divs in a language that reads from right to left

Customized Box with MaterialUI Styling

Images not showing in Vue.js

Is it possible to eliminate the dedupe feature in npm?

Adjusting Image Width with jQuery on Hover

Validation of phone numbers based on country codes

UI-router issue: UI view and links not functioning properly

Transforming a React Class Component into a React Functional Component