CODEWITHSUNDEEP
javascripthtml
GrapeJam
GrapeJam

Reputation: 181

Fetching and displaying data from an API request in HTML

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

Answers (1)

Vinay Somawat
Vinay Somawat

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

Related Questions