var requestURL = 'https://api.myjson.com/bins/18ce70';
var request = new XMLHttpRequest();

request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
    var chatData = request.response;
    populateChatData(chatData);
}

function populateChatData(jsonData) {
    var messages = jsonData['data']['messages'];

    for(var i = 0; i < messages.length; i++) {
        // Create elements
        var div = document.createElement('div');
        var p = document.createElement('p');
        var p1 = document.createElement('p');

        // Set class names for elements
        div.setAttribute('class', 'chat-box');
        p.setAttribute('class', 'response');

        // Populate elements with JSON data (messages, images)
        p.innerHTML = messages[i]['message'];
        div.append(p);
        document.body.appendChild(div);

        // Add names below chat message, depending on loop order
        if(i % 2 == 0) {
            p1.setAttribute('class', 'send-name');
            p1.innerHTML = messages[i]['username'];
            div.append(p1);
        }
        else {
            p1.setAttribute('class', 'receive-name');
            p1.innerHTML = messages[i]['username'];
            div.append(p1);
        }
    }
}