Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.

JSONListModel

From Qt Wiki
Revision as of 08:56, 25 February 2015 by Maintenance script (talk | contribs)
Jump to navigation Jump to search

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
 }
 }