Trying to fetch from API but getting [object Promise] instead

Question

I'm trying to make a website that fetches a random 10 lines from a poem and then outputs them in the HTML file but instead of getting the .json data I'm getting [object Promise]. Can someone help me out?

Here's my code:

JS:

let url = 'https://poetrydb.org/random,linecount/1;10/title,author,lines.json'
const button = document.getElementById('button')
const body = document.getElementById('poem')

async function requestPoem(url) {
    await fetch(url)
    .then((response)=>{
        let data = response.json()
        return data
    })
}

button.onclick = ()=>{
    body.innerHTML = requestPoem(url)
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer src="scripts/main.js"></script>
    <title>poem request</title>
</head>
<body>
    <p id="poem"></p>
    <button id="button">request poem</button>
</body>
</html>

score 0 · Answer 1 · answered May 07 '22 at 22:55

0

requestPoem is an async function, so it can only ever return a promise. You can't avoid the promise, but you can use it, either by calling .then on it, or by putting your code in an async function and awaiting the result. Also, your current requestPoem function has no return statement, so it will need one to define what the promise resolves to.

async function requestPoem(url) {
  const response = await fetch(url);
  return response.json();
}

button.onclick = async () => {
  body.innerHTML = await requestPoem(url);
}

answered May 07 '22 at 22:55

Nicholas Tower

72,740
7
86
98

Hello! I tried out your response but got left with [object Object] instead. Do you know why this might be happening? – pizzalawl May 07 '22 at 23:11
Apparently, the data is an object, not a string. Try logging it out to see what it contains. `console.log(await requestPoem(url))` – Nicholas Tower May 07 '22 at 23:19
I logged it and it contains the data I need + a prototype for 2 objects and an array. – pizzalawl May 07 '22 at 23:39
Ok, so assign the whole object to a local variable (not strictly necessary, but probably the most readable), then pick out the part of the object that you need and assign it to body.innerHTML. Eg, `const data = await requestPoem(url); body.innerHTML = data.somePropertyYouNeed` – Nicholas Tower May 07 '22 at 23:49
Since I need multiple parts of the object I assigned the whole thing to a variable called data, then put all the parts I needed in an array, returned the array, and in the onclick used the different parts of the array on different elements like title, author, and body. The only problem with this solution is that when I tried it all the data was undefined. – pizzalawl May 08 '22 at 00:00

score 0 · Answer 2 · answered May 08 '22 at 03:36

0

Turns out the mistake in the code was that the API was returning an array of objects instead of a single object. Because of this I first had to return data[0] and get the object's properties from there.

answered May 08 '22 at 03:36

pizzalawl

43
8

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 09 '22 at 09:20

Trying to fetch from API but getting [object Promise] instead

2 Answers2