Fetching and displaying data from an API request in HTML

Question

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

Vinay Somawat · Accepted Answer · 2021-02-14 17:27:56Z

2

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;

edited Feb 14, 2021 at 17:27

answered Feb 14, 2021 at 17:22

Vinay Somawat

6871 gold badge15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GrapeJam Over a year ago

From here, if I only want to display the volume metric from assetA and have no need for the rest, how do I retrieve that specific piece of data and insert it into a <p> element?

Vinay Somawat Over a year ago

@GrapeJam Edited my answer for your reference.

GrapeJam Over a year ago

I am a little bit confused - as in my case I am not using a for loop, I just need to display the single volume metric and place it into a paragraph element. If I were to use the example above based on the JSON response I included in my original question, how do I single out that one particular piece of data?

Collectives™ on Stack Overflow

Fetching and displaying data from an API request in HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related