JSON -> AJAX -> bxslider && Malfunction

Question

I have a small JSON file, and I am trying to access it with the following code from one of the AJAX videos:

var xhr = new XMLHttpRequest();
xhr.open('GET', '../src/Models/Items.json');
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
        var employees = JSON.parse(xhr.responseText);
//        var topHTML = '<ul class="bxslider">';
//        var bottomHTML = '</ul>';
        var statusHTML ='';
        for (var i=0; i<employees.length; i += 1) {
            if (employees[i].inoffice === true) {
                statusHTML += '<li>';
            } else {
                statusHTML += '<li>';
            }
            statusHTML += employees[i].name;
            statusHTML += '</li>';
        }
//        statusHTML = topHTML + statusHTML + bottomHTML;
        document.getElementById('mainSlider').innerHTML = statusHTML;
    }
};
xhr.send();

I am using a plugin from github called bxslider which is a sort of carousel. http://bxslider.com/

Inside my HTML I have to call it with the class bxslider and call it with

<script>$(document).ready(function(){
                $('.bxslider').bxSlider({adaptiveHeight: true});
        });</script>

I have gotten both the AJAX and the bxslider to work, but I can't seem to get the <li></li> from the AJAX request to be treated the same as <li></li> within the static HTML page. I have tried several ways, and you will see some variations in my commented out sections of the AJAX.

In general trying to call it in the HTML looks like this

<ul class="bxslider" id="mainSlider">
<!--
                        <li>Yamoya --<br> Heegdlobin</li>
                        <li>Hle Sosa Sho Selsa</li>
                        <li>Ver Lorem Ipsum Thyme</li>
                        <li>4 Score and seven</li>
-->
                        </ul>

Welcome to the Treehouse Community

Looking to learn something new?

Keith Colleluori

Keith Colleluori

JSON -> AJAX -> bxslider && Malfunction