JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<script src="https://rawgit.com/jimhigson/oboe.js/v2.1.3/dist/oboe-browser.js"></script>
<ol id="output">
</ol>

JavaScript

var output = document.getElementById('output');

oboe('https://mysafeinfo.com/api/data?list=englishmonarchs&format=json')
    .node('nm', function(elem) {
        var li = document.createElement('li');
        li.innerHTML = 'My name is ' + elem;
        output.appendChild(li);
    })
    .node('cty', function(elem) {
        var lastChild = output.lastChild;
        lastChild.innerHTML = lastChild.innerHTML + '. I live in ' + elem;
    })
    .node('hse', function(elem) {
        var lastChild = output.lastChild;
        lastChild.innerHTML = lastChild.innerHTML + '. Stay at ' + elem;
    })
    .node('yrs', function(elem) {
        var lastChild = output.lastChild;
        lastChild.innerHTML = lastChild.innerHTML + '. My very sad and happy moment was last from ' + elem;

    })
    .done(function(data) {
        setTimeout(function() {
            alert('Done load request from endpoint!!, see browser console for data view. This alert the actual response time was finished load. The list element showed at the page was loaded chunk by chunk instead of waiting the whole data finish fetched!!');
        }, 2000);
        console.log(data);
    });