Непоследовательное выполнение кода из getJSON
 

Добрый день. У меня есть такая функция, которая достаёт из JSON файла товары типо для интернет магазина.

function showProducts() {
    //выводит продукты из json на страницу
    $.getJSON("goods.json", function (data) {
        var out = "";
        for (var key in data) {
            out += `<div class="product" id="${key}">
                        <img src="${data[key]["image"]}" alt="${data[key]["name"]}">
                        <div class="content">
                            <p class="product_name">${data[key]["name"]}</p>
                            <p class="description">${data[key]["description"]}</p>
                            <div class="fast_order">
                                <div class="price">${data[key]["cost"]}р</div>
                                <div class="buy_button">В корзину</div>
                            </div>
                        </div>
                    </div>`
        }
        $(".main").append(out);
        $(".buy_button").on("click", addToCart);
    });
};

Все как бы работает, только вот если я хочу добавить после этих товаров какой нибудь другой блок, то он появляется над ними. Например, вызываю две функции:

$(document).ready(function () {
    showProducts();
    checkAddedInCart(); 
});

function checkAddedInCart() {
    var kek = "ekkekekekekekkekekekkkkkkekek";
    $(".main").append(kek);
};

В итоге надпись "ekkekekekekekkekekekkkkkkekek" появляется над моими товарами.
Заметил, что в отладчике после строки $.getJSON("goods.json", function (data) идёт прыжок к закрывающейся скобке }); и ничего не добавляется на страницу. Глубже разобраться отладчиком не смог, т.к идут вызовы в какие-то файлы js, хотя я и включил blackbox-ы.
Я совсем новичок, так что, наверняка, не знаю какой-то самой простой вещи, подскажите, почему код себя так ведёт?

Niktia,
showProducts сработает когда захочет, поэтому checkAddedInCart надо вызывать в этой функции строка 19.