Using data in html from an API response

Question

As a starter in html world, i would like to know and start using simple APIs to insert into my blog posts. I tried to include as html values some simple API like: https://bitcoinfees.earn.com/api/v1/fees/recommended and I used examples given here: Display Json data in HTML table using javascript and some others more like: http://jsfiddle.net/sEwM6/258/

 $.ajax({
    url: '/echo/json/', //Change this path to your JSON file.
    type: "post",
    dataType: "json",
    //Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        drawTable(data);
    }
});

function drawTable(data) {
    var rows = [];

    for (var i = 0; i < data.length; i++) {
        rows.push(drawRow(data[i]));
    }

    $("#personDataTable").append(rows);
}

function drawRow(rowData) {
    var row = $("<tr />")
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));

    return row;
}

but the result is always blank. Please, can you give me some hint to can use that API and insert that numbers values for "fastestFee","halfHourFee","hourFee" as html values?

Thank you all!

score 0 · Answer 1 · answered Oct 01 '18 at 11:22

Welcome to the html world. You are certainly right in assuming that data from APIs is a great way to make your websites more dynamic.

There is an example on W3 Schools on how to handle a http request. I think this is a good place to start https://www.w3schools.com/xml/xml_http.asp. You create a http object that does some sort of data fetching. In this example it is done with the xhttp.send(). At the same time you have a listener that monitors if the onreadystatechange property of the xhttp has changed. And if that change is status 200 (success) then perform some actions. Here is my JSfiddle with example from your API http://jsfiddle.net/zvqr6cxp/

Typically these actions would be to structure the returned data and then do something with the data, like show them in a table.

The example shows the native html xhttp object in use with an event listener. Typically as you learn more about this you would probably start using a framework such as jquery or Angular that can handle http requests smoother, keyword here is callback functions.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       //In this example, I used your API link..first I would do is turn the JSON into a JS object
       myObject = JSON.parse(xhttp.responseText)

       document.getElementById("fast").innerHTML = myObject.fastestFee
       document.getElementById("half").innerHTML = myObject.halfHourFee
       document.getElementById("hour").innerHTML = myObject.hourFee
    }
};
xhttp.open("GET", "https://bitcoinfees.earn.com/api/v1/fees/recommended", true);
xhttp.send();

Using data in html from an API response

1 Answers1