How to add a dynamic URL with Fetch?

Question

This code isn't working. When i remove the &type = {t} it works. But when i put it the fetch doesn't return any array.

let n = 12
let c = 20
let t = 'multiple'
let d = 'hard'

fetch(`https://opentdb.com/api.php?amount=${n}&category=${c}&difficulty=${d}&type=${t}`)
    .then((response) => response.json())
    .then((data) => printCards(data))
    
function printCards(questions) {
    console.log(questions);
}

Here you can find information bout it https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — Raqha, Oct 14 '20 at 04:39
What you're doing should be fine for the data you're showing. You'll have to use your browser's developer tools to see what the error is. In general though, you'll need to use `encodeURIComponent()` around data you use in a URL, to escape it for use. An easier method, if you're using multiple parameters: https://stackoverflow.com/a/49701878/362536 — Brad, Oct 14 '20 at 04:39
I guess the problem is with the API you are sending to and not the front end. — vlad katz, Oct 14 '20 at 04:39

score 0 · Answer 1 · answered Oct 14 '20 at 04:52

When I run your first fetch -> server answer:

{response_code: 1, results: []}

If we open API doc Code 1: No Results

So your console will be empty.

When I delete type -> server answer:

{response_code: 0, results: [...]} some of result with type: "multiple"

Good news: your code is fine.

Bad news: looks as some api limitation or error.

score 0 · Answer 2 · answered Oct 14 '20 at 05:03

This is not an answer, but I can't comment, since I'm relatively new to StackOverflow. I tried manually hitting the API, and the one with parameter type="multiple" does not return any result. There's nothing wrong with your fetch query, you just need to confirm you're using the API correctly.

How to add a dynamic URL with Fetch?

2 Answers2