0
const quote = document.querySelector("#quotes")
const btn = document.querySelector("#quotesBtn")

const quotes = () =>{
const setHeaders = {
    headers: {
        'X-RapidAPI-Key': 
        'X-RapidAPI-Host': 
        }
    }
    fetch('https://famous-quotes4.p.rapidapi.com/random?category=education&count=1',setHeaders)
     .then(response => response.json())
     .then(data => quote.innerHTML=data)
     .catch(err => err);
    
}
btn.addEventListener("click", quotes);
quotes();

I am unable to show the data of API in element tag. Error showing on website [object].

Kamlish Goswami
  • 1
  • 2
  • Well, you can't really assign an object to innerHTML, you should first sanitize it properly and then assign a text representation of that object to your innerHTML. From the looks of it, data will be an array, containing objects with `author`, `category`, `id` and `text` properties. Also, don't share your api codes – Icepickle Dec 13 '22 at 16:07
  • Thank You! I did like this. data => quote.innerHTML=data.map(a => a.text) – Kamlish Goswami Dec 14 '22 at 06:27

0 Answers0