JSONListModel: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
The JSONListModel code is Open Source and available under the MIT license at: | The JSONListModel code is Open Source and available under the MIT license at: | ||
"github.com/kromain/qml-utils":https://github.com/kromain/qml-utils | |||
== Features == | == Features == | ||
Line 15: | Line 15: | ||
== Example == | == Example == | ||
With a file '''jsonData.txt''' containing: | With a file '''jsonData.txt''' containing: | ||
<code> | |||
{ "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 | |||
} | |||
} | |||
} | |||
</code> | |||
We can write: | We can write: | ||
<code> | <code> | ||
JSONListModel { | |||
id: jsonModel1 | |||
source: "jsonData.txt" | |||
// All books in the store object | |||
query: "$.store.book[*]" | |||
} | |||
JSONListModel { | JSONListModel { | ||
id: jsonModel2 | |||
source: "jsonData.txt" | |||
// Books less than $10 | |||
query: "$..book[?(@.price<10)]" | |||
} | |||
JSONListModel { | 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')]" | |||
} | |||
</code> | |||
And use it in views and delegates like this: | And use it in views and delegates like this: | ||
<code> | <code> | ||
ListView { | |||
model: jsonModel1.model | |||
delegate: Component { | delegate: Component { | ||
Text { | |||
// Can be any of the JSON properties: model.author, model.price, etc. | |||
text: model.title | |||
} | |||
} | |||
</code> | |||
[[Category:snippets]] | [[Category:snippets]] | ||
[[Category:Developing_with_Qt::Qt Quick]] | |||
[[Category:JSON]] |
Revision as of 08:56, 25 February 2015
JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML ListView.
Code
The JSONListModel code is Open Source and available under the MIT license at:
"github.com/kromain/qml-utils":https://github.com/kromain/qml-utils
Features
- 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)
Example
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
}
}