JS: How to solve this [object Promise]?-CodePudding

I got this problem [object Promise], when I am trying to load quotes from a API from this file https://type.fit/api/quotes. At the top of the page, after the loader finish, the quotes should be loaded, which are defined on the page https://type.fit/api/quotes . I am using async await function for this. I have next function: selectAndReturnRandomQuote, this function call loadQuotesFromJSON, which actually do fetch on link and return quotes, at the end of function I return print on page like this "Quote of the day: " quote.quoteOfAuthor " by " quote.author. Next I have uploadQuote, which acutually with innerHTML put my result on page. Function sleep and setLoader are used to make loading quote, before acutally its shown. Below are my code snippet.

"use strict";


async function selectAndReturnRandomQuote() {
    let quotesFromJSON = await loadQuotesFromJSON();
    let quote = quotesFromJSON[Math.floor(Math.random() * quotesFromJSON.length)];

    let result = "Quote of the day: "   quote.text  " by "   quote.author;
    return result;
    
}

function uploadQuote(){
    document.getElementById('randomeQuotes').innerHTML = selectAndReturnRandomQuote();
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
 }
  
async function setLoader() {
    document.getElementById('randomeQuotes').innerHTML = "<img src='loader2.gif' width='28px' height='55px'>";
    await sleep(1000);  
    await uploadQuote();
}
  
setLoader();

async function loadQuotesFromJSON() {
    const response = await fetch('https://type.fit/api/quotes');
    return response.json();
}

div {
    white-space: pre-line;
    margin-bottom: 1px;
    background-color:aliceblue;
    border-radius: 14px;
    opacity:0.83;
    width: 430px;
    position:relative;
    left: 80px;
    border-style: solid;
    border-width: 2.2px;
    border-color:aquamarine;
}

img {
    width: 100px; 
    border-radius: 50px;
    border-style: solid;
    border-width: 2.2px;
    border-color:aquamarine;
}

body {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    width: 600px;
    margin: auto;
    text-align: center;
    margin-top: 55px;

    background-color:cadetblue;
    
}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Contact form</title>
        <link rel="stylesheet" href="FormExternalStyles.css">
    </head>
    <body>
        <div id = 'randomeQuotes' class = "marginbottom">
        </div>
    </body>
</html>

CodePudding user response：

"use strict";


async function selectAndReturnRandomQuote() {
    let quotesFromJSON = await loadQuotesFromJSON();
    let quote = quotesFromJSON[Math.floor(Math.random() * quotesFromJSON.length)];

    let result = "Quote of the day: "   quote.text  " by "   quote.author;
    return result;
    
}

async function uploadQuote(){
    document.getElementById('randomeQuotes').innerHTML = await selectAndReturnRandomQuote();
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
 }
  
async function setLoader() {
    document.getElementById('randomeQuotes').innerHTML = "<img src='loader2.gif' width='28px' height='55px'>";
    await sleep(1000);  
    await uploadQuote();
}
  
setLoader();

async function loadQuotesFromJSON() {
    const response = await fetch('https://type.fit/api/quotes');
    return response.json();
}

div {
    white-space: pre-line;
    margin-bottom: 1px;
    background-color:aliceblue;
    border-radius: 14px;
    opacity:0.83;
    width: 430px;
    position:relative;
    left: 80px;
    border-style: solid;
    border-width: 2.2px;
    border-color:aquamarine;
}

img {
    width: 100px; 
    border-radius: 50px;
    border-style: solid;
    border-width: 2.2px;
    border-color:aquamarine;
}

body {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    width: 600px;
    margin: auto;
    text-align: center;
    margin-top: 55px;

    background-image: url(pozadinalogin.png);
    background-repeat: no-repeat;
    background-size: 530x 510px;
    background-color:cadetblue;
    background-position: 80px 90px;
    
}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Contact form</title>
        <link rel="stylesheet" href="FormExternalStyles.css">
    </head>
    <body>
        <div id = 'randomeQuotes' class = "marginbottom">
        </div>
    </body>
</html>

async function uploadQuote(){
    document.getElementById('randomeQuotes').innerHTML = await selectAndReturnRandomQuote();
}