Reputation: 181
I am not familiar with straight HTML, and am having trouble figuring out how to request and then display data from an API request.
How do I make the request, and then assuming the data returned is structured to what I have included below, how do I then display only the volume
metric from assetA
in a <p>
element?
time_range:
start: "2021-02-14T17:04:02Z"
end: "2021-01-15T17:04:02Z"
volumes:
assetA:
name: "assetName1"
volume: 100000
assetB:
name: "assetName2"
volume: 50000
Any help would be very much appreciated
Upvotes: 0
Views: 327
Reputation: 677
You can do something like this as per your requirement.
// api url
const api_url =
"https://employeedetails.free.beeceptor.com/my/api/path";
// Defining async function
async function getapi(url) {
// Storing response
const response = await fetch(url);
// Storing data in form of JSON
var data = await response.json();
console.log(data);
if (response) {
hideloader();
}
show(data);
}
// Calling that async function
getapi(api_url);
// Function to define innerHTML for HTML table
function show(data) {
let tab =
`<tr>
<th>Name</th>
<th>Office</th>
<th>Position</th>
<th>Salary</th>
</tr>`;
// Loop to access all rows
for (let r of data.list) {
tab += `<tr>
<td>${r.name} </td>
<td>${r.office}</td>
<td>${r.position}</td>
<td>${r.salary}</td>
</tr>`;
}
// Setting innerHTML as tab variable
document.getElementById("employees").innerHTML = tab;
Upvotes: 2