JSONListModel: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
JSONListModel is a pure- | JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML ListView. | ||
==Code== | == Code == | ||
The JSONListModel code is Open Source and available under the | 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 == | ||
* mimics the XMLListModel component by providing similar | * mimics the XMLListModel component by providing similar API and properties | ||
* supports both source-based and string-based | * supports both source-based and string-based JSON data | ||
* support complex | * support complex JSON documents and queries via JSONPath (XPath for JSON) | ||
==Example== | == Example == | ||
With a file '''jsonData.txt''' containing:<br /> | With a file '''jsonData.txt''' containing:<br /><code><br />{ "store&quot;: {<br /> "book&quot;: [<br /> { "category&quot;: "reference&quot;,<br /> "author&quot;: "Nigel Rees&quot;,<br /> "title&quot;: "Sayings of the Century&quot;,<br /> "price&quot;: 8.95<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "Evelyn Waugh&quot;,<br /> "title&quot;: "Sword of Honour&quot;,<br /> "price&quot;: 12.99<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "Herman Melville&quot;,<br /> "title&quot;: "Moby Dick&quot;,<br /> "isbn&quot;: "0-553-21311-3&quot;,<br /> "price&quot;: 8.99<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "J. R. R. Tolkien&quot;,<br /> "title&quot;: "The Lord of the Rings&quot;,<br /> "isbn&quot;: "0-395-19395-8&quot;,<br /> "price&quot;: 22.99<br /> }<br /> ],<br /> "bicycle&quot;: {<br /> "color&quot;: "red&quot;,<br /> "price&quot;: 19.95<br /> }<br /> }<br />}<br /></code> | ||
We can write: | We can write: | ||
<code><br /> JSONListModel {<br /> id: jsonModel1<br /> source: "jsonData.txt&quot;<br /> // All books in the store object<br /> query: "$.store.book[*]"<br /> } | |||
JSONListModel {<br /> id: jsonModel2<br /> source: "jsonData.txt&quot;<br /> // Books less than $10<br /> query: "$..book[?(</code>.price&lt;10)]"<br /> } | |||
JSONListModel {<br /> id: jsonModel3<br /> json: '[ {"label&quot;: "Answer&quot;, "value&quot;: "42&quot;}, {"label&quot;: "Pastis&quot;, "value&quot;: "51&quot;}, {"label&quot;: "Alsace&quot;, "value&quot;: "67&quot;}, {"label&quot;: "Alsace&quot;, "value&quot;: "68&quot;} ]'<br /> // Labels starting with 'A'<br /> query: "$[?(<code>.label.charAt(0)==='A')]"<br /> }<br /></code> | |||
And use it in views and delegates like this: | And use it in views and delegates like this: | ||
<code><br /> ListView {<br /> model: jsonModel1.model | |||
delegate: Component {<br /> Text {<br /> // Can be any of the JSON properties: model.author, model.price, etc.<br /> text: model.title<br /> }<br /> }<br /></code> | |||
[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:JSON]] | |||
Revision as of 14:32, 23 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:
<br />{ "store&quot;: {<br /> "book&quot;: [<br /> { "category&quot;: "reference&quot;,<br /> "author&quot;: "Nigel Rees&quot;,<br /> "title&quot;: "Sayings of the Century&quot;,<br /> "price&quot;: 8.95<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "Evelyn Waugh&quot;,<br /> "title&quot;: "Sword of Honour&quot;,<br /> "price&quot;: 12.99<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "Herman Melville&quot;,<br /> "title&quot;: "Moby Dick&quot;,<br /> "isbn&quot;: "0-553-21311-3&quot;,<br /> "price&quot;: 8.99<br /> },<br /> { "category&quot;: "fiction&quot;,<br /> "author&quot;: "J. R. R. Tolkien&quot;,<br /> "title&quot;: "The Lord of the Rings&quot;,<br /> "isbn&quot;: "0-395-19395-8&quot;,<br /> "price&quot;: 22.99<br /> }<br /> ],<br /> "bicycle&quot;: {<br /> "color&quot;: "red&quot;,<br /> "price&quot;: 19.95<br /> }<br /> }<br />}<br />
We can write:
<br /> JSONListModel {<br /> id: jsonModel1<br /> source: "jsonData.txt&quot;<br /> // All books in the store object<br /> query: "$.store.book[*]"<br /> }
JSONListModel {<br /> id: jsonModel2<br /> source: "jsonData.txt&quot;<br /> // Books less than $10<br /> 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')]"<br /> }<br />
And use it in views and delegates like this:
<br /> ListView {<br /> model: jsonModel1.model
delegate: Component {<br /> Text {<br /> // Can be any of the JSON properties: model.author, model.price, etc.<br /> text: model.title<br /> }<br /> }<br />