Nativescript ListView [object Object]

Question

I'm new at Nativescript and I'm trying to use ListView with vanilla javascript. I have a weird error where the output in ListViews shows as [object Object] instead of an actual value.

JSON response

[
    {
        passenger: "John Doe",
        category: "Arrival"
    },
    {
        passenger: "Martin Schulz",
        category: "Departure"
    },
    {
        passenger: "Giovanni Marocco",
        category: "Arrival"
    }
]

Controller

var view = require("ui/core/view");
var http = require("http");

exports.pageLoaded = function(args) {
    var page = args.object;

    http.getJSON("http://demo4727937.mockable.io/test").then(function (r) {
        page.bindingContext = {
            'myItems': r
        }
    }, function (e) {
        //// Argument (e) is Error!
    });

};

Template

<Page loaded="pageLoaded">
    <StackLayout>
        <ListView items="{{ myItems }}">
            <ListView.itemTemplate height="50">
               <Label text="{{passenger}}" textWrap="true" class="title" />
               <Label text="{{category}}" textWrap="true" class="title" />
            </ListView.itemTemplate>
         </ListView>
    </StackLayout>
</Page>

Result

Answer 1

The problem here is you need to wrap you template in a view container eg StackLayout or even a GridLayout

<Page loaded="pageLoaded">
    <StackLayout>
        <ListView items="{{ myItems }}">
            <ListView.itemTemplate height="50">
                <StackLayout>
                    <Label text="{{passenger}}" textWrap="true" class="title" />
                    <Label text="{{category}}" textWrap="true" class="title" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
    </StackLayout>
</Page>