Пустой вывод html при попытке создать неупорядоченный список из JSON с Nunjucks

Question

Я новичок в nunjucks, и в настоящее время я пытаюсь создать элемент, который создает неупорядоченный список из массива JS. Очень понравилось бы, если бы кто-то мог объяснить, что я делаю неправильно.

Код ниже просто выводит пробел <ul> элемент.

HTML код ниже

<div class="container">
    <div class="row">
        <div class="col py-2 my-2">
        {{ itemLine(shoppingItemArray) }}
        </div>
    </div>
</div>

<script>
    var shoppingItemArray = [{
        "1": {
            date: "23.03.2018",
            price: "800",
            receipt: "url"
        },
        "2": {
            date: "24.03.2018",
            price: "500",
            receipt: "url"
        }
    }]
</script>

Элемент Nunjucks ниже

   {% macro itemLine(shoppingItemArray) %}
        <div class="card my-2 px-4 py-3">
            <ul>
            {% for item in shoppingItemArray %}
            <li>{{item}}</li>
            {% endfor %}
            </ul>
        </div>
    {% endmacro %}