JSONListModel: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
mNo edit summary
 
(9 intermediate revisions by 5 users not shown)
Line 1: Line 1:
JSONListModel is a pure-<span class="caps">QML</span> component that allows using <span class="caps">JSON</span> data as datasource for a <span class="caps">QML</span> ListView.
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:Developing with Qt::Qt Quick::QML]]
JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML ListView.  


==Code==
See [https://wiki.qt.io/index.php?title=QJsonModel QJsonModel] for a pure Qt/C++ class based on QAbstractItemModel.


The JSONListModel code is Open Source and available under the <span class="caps">MIT</span> license at:
== Code ==


[https://github.com/kromain/qml-utils github.com/kromain/qml-utils] ''[github.com]''
The JSONListModel code is Open Source and available under the MIT license at:


==Features==
[https://github.com/kromain/qml-utils github.com/kromain/qml-utils]


* mimics the XMLListModel component by providing similar <span class="caps">API</span> and properties
== Features ==
* supports both source-based and string-based <span class="caps">JSON</span> data
* support complex <span class="caps">JSON</span> documents and queries via <span class="caps">JSONP</span>ath (XPath for <span class="caps">JSON</span>)


==Example==
* 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:<br />
== Example ==
 
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>
    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')]"
    }
</code>


And use it in views and delegates like this:
And use it in views and delegates like this:


===Categories:===
<code>
    ListView {
        model: jsonModel1.model


* [[:Category:Developing with Qt|Developing_with_Qt]]
        delegate: Component {
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
            Text {
* [[:Category:JSON|JSON]]
                // Can be any of the JSON properties: model.author, model.price, etc.
* [[:Category:snippets|snippets]]
                text: model.title
            }
        }
</code>

Latest revision as of 21:43, 4 April 2017

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML ListView.

See QJsonModel for a pure Qt/C++ class based on QAbstractItemModel.

Code

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

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