From Qt Wiki
Revision as of 15:03, 4 March 2015 by AutoSpider (talk | contribs) (Convert ExpressionEngine links)
Jump to: navigation, search
JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML ListView.


The JSONListModel code is Open Source and available under the MIT license at:



  • mimics the XMLListModel component by providing similar API and properties
  • supports both source-based and string-based JSON data
  • support complex JSON documents and queries via JSONPath (XPath for JSON)


With a file jsonData.txt containing: { "store": {

"book": [
{ "category": "reference",
"author": "Nigel Rees",
"title": "Sayings of the Century",
"price": 8.95
{ "category": "fiction",
"author": "Evelyn Waugh",
"title": "Sword of Honour",
"price": 12.99
{ "category": "fiction",
"author": "Herman Melville",
"title": "Moby Dick",
"isbn": "0-553-21311-3",
"price": 8.99
{ "category": "fiction",
"author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
"price": 22.99
"bicycle": {
"color": "red",
"price": 19.95


We can write:

JSONListModel {
id: jsonModel1
source: "jsonData.txt"
// All books in the store object
query: "$.store.book[*]"

JSONListModel {

id: jsonModel2
source: "jsonData.txt"
// Books less than $10
query: "$..book[?(@.price<10)]"

JSONListModel {

id: jsonModel3
json: '[  {"label": "Answer", "value": "42"},  {"label": "Pastis", "value": "51"},  {"label": "Alsace", "value": "67"},  {"label": "Alsace", "value": "68"}  ]'
// Labels starting with 'A'
query: "$[?(@.label.charAt(0)==='A')]"

And use it in views and delegates like this:

ListView {
model: jsonModel1.model

delegate: Component {

Text {
// Can be any of the JSON properties: model.author, model.price, etc.
text: model.title