JSONListModel: Difference between revisions

From Qt Wiki
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
"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:<br /><code><br />{ &quot;store&amp;quot;: {<br /> &quot;book&amp;quot;: [<br /> { &quot;category&amp;quot;: &quot;reference&amp;quot;,<br /> &quot;author&amp;quot;: &quot;Nigel Rees&amp;quot;,<br /> &quot;title&amp;quot;: &quot;Sayings of the Century&amp;quot;,<br /> &quot;price&amp;quot;: 8.95<br /> },<br /> { &quot;category&amp;quot;: &quot;fiction&amp;quot;,<br /> &quot;author&amp;quot;: &quot;Evelyn Waugh&amp;quot;,<br /> &quot;title&amp;quot;: &quot;Sword of Honour&amp;quot;,<br /> &quot;price&amp;quot;: 12.99<br /> },<br /> { &quot;category&amp;quot;: &quot;fiction&amp;quot;,<br /> &quot;author&amp;quot;: &quot;Herman Melville&amp;quot;,<br /> &quot;title&amp;quot;: &quot;Moby Dick&amp;quot;,<br /> &quot;isbn&amp;quot;: &quot;0-553-21311-3&amp;quot;,<br /> &quot;price&amp;quot;: 8.99<br /> },<br /> { &quot;category&amp;quot;: &quot;fiction&amp;quot;,<br /> &quot;author&amp;quot;: &quot;J. R. R. Tolkien&amp;quot;,<br /> &quot;title&amp;quot;: &quot;The Lord of the Rings&amp;quot;,<br /> &quot;isbn&amp;quot;: &quot;0-395-19395-8&amp;quot;,<br /> &quot;price&amp;quot;: 22.99<br /> }<br /> ],<br /> &quot;bicycle&amp;quot;: {<br /> &quot;color&amp;quot;: &quot;red&amp;quot;,<br /> &quot;price&amp;quot;: 19.95<br /> }<br /> }<br />}<br /></code>
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><br /> JSONListModel {<br /> id: jsonModel1<br /> source: &quot;jsonData.txt&amp;quot;<br /> // All books in the store object<br /> query: &quot;$.store.book[*]&quot;<br /> }
<code>
JSONListModel {
id: jsonModel1
source: "jsonData.txt"
// All books in the store object
query: "$.store.book[*]"
}


JSONListModel {<br /> id: jsonModel2<br /> source: &quot;jsonData.txt&amp;quot;<br /> // Books less than $10<br /> query: &quot;$..book[?(</code>.price&amp;lt;10)]&quot;<br /> }
JSONListModel {
id: jsonModel2
source: "jsonData.txt"
// Books less than $10
query: "$..book[?(@.price<10)]"
}


JSONListModel {<br /> id: jsonModel3<br /> json: '[  {&quot;label&amp;quot;: &quot;Answer&amp;quot;, &quot;value&amp;quot;: &quot;42&amp;quot;},  {&quot;label&amp;quot;: &quot;Pastis&amp;quot;, &quot;value&amp;quot;: &quot;51&amp;quot;},  {&quot;label&amp;quot;: &quot;Alsace&amp;quot;, &quot;value&amp;quot;: &quot;67&amp;quot;},  {&quot;label&amp;quot;: &quot;Alsace&amp;quot;, &quot;value&amp;quot;: &quot;68&amp;quot;}  ]'<br /> // Labels starting with 'A'<br /> query: &quot;$[?(<code>.label.charAt(0)==='A')]&quot;<br /> }<br /></code>
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><br /> ListView {<br /> model: jsonModel1.model
<code>
ListView {
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>
delegate: Component {
Text {
// Can be any of the JSON properties: model.author, model.price, etc.
text: model.title
}
}
</code>


[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:JSON]]
[[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
 }
 }