JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- ko if: customers() -->
<div id="custInfoList" data-role="content" data-bind="foreach: customers">
    <p data-bind="text: $data"></p>
</div>
<!-- /ko -->
<div id="empty" data-role="content" data-bind="if: customers().length === 0" style="display: none;">
    <p>No Customer Information</p>
</div>
<button data-bind="click:popCustomers">Populate</button>

JavaScript

$.support.cors = true;
var test = {
    customers: ko.observableArray(),
    popCustomers: function () {
        for (var i = 0; i < 3; i++) {
            this.customers.push(i);
        }
    },
    popByAjax: function () {
        console.log("Calling JSON...");
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?id=2172797", function (data) {
            console.log(data);
            if (data.sys) {
                this.customers.push(data.sys.country);
                console.log("Loaded");
            }
        }.bind(this));
    }
};
test.popByAjax();
ko.applyBindings(Object.create(test));