How do I correctly load data into a Picker with an ArrayDataModel? (Blackberry OS 10 Cascades) - qml

Question

I am working with Blackberry 10 Cascades and I am trying to load data into a picker using an ArrayDataModel. All of the documentation online I have read thusfar have given me examples to use with XMLDataSource, however since my data is JSON and coming from a live feed I would rather not have to take the performance hit of serializing it into XML to load into the XMLDataSource (which seems to be pretty temperamental from my cursory investigations).
I have some code that is giving me partial functionality (correct number of rows and columns), however when attempting to access the pickerItemData property, the result is always undefined.
The following code shows the partial functionality, it is adapted from http://developer.blackberry.com/native/reference/cascades/bb_cascades_picker.html
There is some debug output from the Console which reads
Picker: incorrect model, wrong columns number: 0
Unfortunately this doesn't make any sense to me, as the Picker is rendering the correct number of columns. There also does not appear to be any documentation on the error message.
import bb.cascades 1.2
Page {
Container {
leftPadding: 24.0
rightPadding: 24.0
topPadding: 12.0
bottomPadding: 12.0
controls: [
Picker {
id: picker
title: "Picker title"
expanded: true
rootIndexPath: []
dataModel: ArrayDataModel {
id: dataModel
}
pickerItemComponents: [
PickerItemComponent {
type: "item1"
content: Container {
background: Color.create(pickerItemData.background)
}
},
PickerItemComponent {
type: "item2"
content: Container {
Label {
text: pickerItemData.text
textStyle.color: Color.create(pickerItemData.color)
}
}
}
]
onCreationCompleted: {
dataModel.append([
{
"item1": [ {
"background": "#ff0000ff"
}, {
"background": "#ff00ff00"
},
{
"background": "#ffff0000"
}, {
"background": "#ff00ffff"
} ]
},
{
"item2": [
{
"text": "Item 1",
"color": "#ff888888"
},
{
"text": "Item 2",
"color": "#ff0000ff"
},
{
"text": "Item 3",
"color": "#ff00ff00"
},
{
"text": "Item 4",
"color": "#ff00ffff"
},
{
"text": "Item 5",
"color": "#ffff0000"
},
{
"text": "Item 6",
"color": "#ffff00ff"
},
{
"text": "Item 7",
"color": "#ffffff00"
},
{
"text": "Item 8",
"color": "#ffffffff"
} ]
} ]);
}
onSelectedValueChanged: {
var index0 = picker.selectedIndex(0);
var index1 = picker.selectedIndex(1);
console.log("Selection: " + index0 + ", " + index1);
}
}
]
}
}
The structure of the data provided via JSON is identical to the structure of the data provided by the XMLDataSource. Any help or insight into this problem would be greatly appreciated.