JSFiddle - React, Tailwind, and code Playground

by Jennifer Piccione

HTML

<ul id="messages"></ul>
<button id="go">Load Messages</button>

JavaScript

var fakeServerResponse = '{"messages": [{"text": "Hello", "priority": 1},{"text": "Bye",   "priority": 2}],"sender": "Lazy automated system"}';

document.getElementById("go").addEventListener("click", function (e) {
    console.log("loading messages");

    var req = new XMLHttpRequest();

    req.addEventListener("load", function (e) {
        if (req.status == 200) {
            var data = JSON.parse(req.responseText);
            var messages = data.messages;
            var list = document.getElementById("messages");

            for (var i = 0; i < messages.length; ++i) {
                var item = document.createElement("li");
                item.innerText = messages[i].text + " (" + messages[i].priority + ")"
                list.appendChild(item);
            }
        }
    });

    var postData = new FormData();
    postData.append("json", fakeServerResponse);

    req.open("POST", "/echo/json/");
    req.send(postData);

});