can you tell me what is wrong in my code. i have tried the debugger but know result.i used the async function to fetch random quotes from the api and save the data in the data variable, then saved all the data to the tab variable.Here is the Html code:
async function fetchRandomJokes() {
const response = await fetch("https://api.chucknorris.io/jokes/random");
const data = await response.json();
function show(data) {
console.log(data);
let tab =
`<tr>
<th>url</th>
<th>value</th>
</tr>`;
// Loop to access all rows
for (let r of data.list) {
tab += `<tr>
<td>${r.url}</td>
<td>${r.value}</td>
</tr>`;
document.getElementById("quotes").value = tab;
console.log(tab);
}
}
return tab;
}#button1 {
border: 2px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}</head>
<body>
<button id="button1" onClick="fetchRandomJokes()">Quotes</button>
<h1 id="quotes"></h1>`https://api.chucknorris.io returns an object not a list. If you want a list I might declare a list outside of the function that data can be appended to. Instead of return tab which is out of scope, call show(data). Instead of appending table rows to h1 use table with innerHTML instead of value
const myJokes=[]
async function fetchRandomJokes() {
const response = await fetch("https://api.chucknorris.io/jokes/random");
const data = await response.json();
function show(data) {
myJokes.push(data)
let tab = '<tr><th>url</th><th>value</th></tr>';
// Loop to access all rows
for (let r of myJokes) {
tab += `<tr><td>${r.url}</td><td>${r.value}</td></tr>`;
}
document.getElementById("quotes").innerHTML = tab;
}
show(data)
}#button1 {
border: 2px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}</head>
<body>
<button id="button1" onClick="fetchRandomJokes()">Quotes</button>
<table id="quotes"></table>