Xamarin Forms Binding properties not appearing

Question

I'm using Xamarin Forms to get "orders" and list them in a table view from an api I've built in ROR.

An example return looks like the following:

[
{
    "id": 6,
    "invoice": "Testing API",
    "description": "Testing the API readouts",
    "weight": 100,
    "length": 100,
    "width": 100,
    "height": 100,
    "account_id": 1,
    "driver_id": null,
    "state": "needs_driver",
    "account_quote": 1041,
    "driver_quote": 781,
    "created_at": "2017-06-10T02:03:57.458Z",
    "updated_at": "2017-06-10T02:04:05.535Z",
    "driver_rating": 5,
    "account_rating": 5,
    "guid": "a3bb60e5-8744-44fe-9554-a1e26867d411"
}
]

Here is the code parsing the return:

using (var client = new HttpClient())
{
        var responseText = await client.GetStringAsync(url);
        List<Order> data = JsonConvert.DeserializeObject<List<Order>>(responseText);

        orders = new ObservableCollection<Order>(data);

        Debug.WriteLine(orders.Count);

        foreach (Order order in orders)
        {
            Debug.WriteLine(order.ToString());
        }
}

For the example json above, output for the Debug looks like the following:

1

[Order: ID=6, Description=Testing the API readouts, OrderStatus=Preview, PickupContact=, DropoffContact=, PickupAddress=, DropoffAddress=, PickupTime=1/1/0001 12:00:00 AM, DropoffTime=1/1/0001 12:00:00 AM, PickupTimeFormatted=1/1/0001 12:00 AM, DropoffTimeFormatted=1/1/0001 12:00 AM]

However, the view looks like a blank table. :(

Here is the XAML for the list page:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Divco.MyOrdersPage" Title="My Schedule">
<ContentPage.Content>
    <StackLayout>
        <ListView  x:Name="OrderView" ItemsSource="{Binding Orders}" ItemTapped="OnOrderSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding description}" Detail="{Binding PickupTimeFormatted}" DetailColor="Fuschia" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

I have some default orders that use the same properties, and when I add two to the end of the list, they appear!

What am I missing?

UPDATE -----------------------

Here is the beginning of MyOrdersPage.cs

public partial class MyOrdersPage : ContentPage
{
    ObservableCollection<Order> orders = new ObservableCollection<Order>();

    public MyOrdersPage(string response)
    {
        InitializeComponent();

        //Debug.WriteLine(response);

        UpdateOrders();

        OrderView.ItemsSource = orders;

        OrderView.IsPullToRefreshEnabled = true;

        // sample orders for testing, comment when able to pull information from heroku
        //orders.Add(Order.DefaultOrder);
        //orders.Add(Order.DefaultOrder);
    }
}

NOTE: When I uncomment "orders.Add(Order.DefaultOrder);", the two default orders I use for testing appear on the list.

Here is a screenshot from uncommenting the last two "orders.Add(Order.DefaultOrder);"

Here are my project warnings, in case this helps...

Answer 1

Sorry poor english

So you don't use a ViewModel. Okay then. Here we go:

Seems like your UpdateOrders() method is asyncronous. This make the SO use a thread to proccess those instructions. Some errors in this cases is not shown and don't crashs the app. Your thread (UpdateOrders) is making changes into your app main thread, so you need to do the changes inside a BeginInvokeOnMainThread method block.

Try this:

Inside your UpdateOLrders method, at the using block, instead of orders = new ObservableCollection<Order>(data);

do

foreach(var item in data)
{    
    Device.BeginInvokeOnMainThread(() => orders.Add(item));
}

This may works, but it's far from best way to do this kind of thing. I suggest you read this and this articles. I hope it is helpfull.