I'm no expert on JSONListModel so I may be mistaken, but it seems to be expecting to iterate over a list of Objects. What you get from rad.io is a list of strings, which seems to be causing your problems. But since you don't need to do any fancy processing of the result, it's easy to roll this by hand.
What you want to do is parse the response into a list (usingJSON.parse
). Then you can go through the elements of the list. For each, you create an object and append that to a ListModel
. Note that the ListModel
takes objects, not strings. Then the delegate can reference the properties of those objects.
Example code:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
MainView {
width: 300
height: 600
property string source: "http://www.rad.io/info/menu/valuesofcategory?category=_genre"
ListModel {
id: listModel
}
Component.onCompleted: {
var xhr = new XMLHttpRequest;
xhr.open("GET", source);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var list = JSON.parse(xhr.responseText);
listModel.clear();
for (var i in list)
listModel.append({ "genre": list[i] });
}
}
xhr.send();
}
Page {
title: i18n.tr("by Genre")
UbuntuListView {
height: parent.height
width: parent.width
clip: true
model: listModel
cacheBuffer: contentHeight
delegate: ListItem.Standard {
text: index + " " + genre
}
}
}
}
Let me take a moment to remind you of the importance of posting short, self-contained, correct examples. The code you posted failed to run not because of any problem with parsing JSON, but because a Tab
cannot be a top-level widget. Anyone who tried to help you first had to figure out that before getting to the real problem.
Also, when using a non-default component, like JSONListModel
, please note this fact and point us to where it can be found. The less work it takes to reproduce the problem, the better.