Difference between revisions of "JSONListModel"

From Qt Wiki
Jump to: navigation, search
m
 
(8 intermediate revisions by 5 users not shown)
Line 1: Line 1:
JSONListModel is a pure-QML component that allows using JSON data as datasource for a QML 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.   
 +
 
 +
See [https://wiki.qt.io/index.php?title=QJsonModel QJsonModel] for a pure Qt/C++ class based on QAbstractItemModel.  
  
 
== Code ==
 
== Code ==
Line 5: Line 10:
 
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
+
[https://github.com/kromain/qml-utils github.com/kromain/qml-utils]
  
 
== Features ==
 
== Features ==
Line 15: Line 20:
 
== 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 {
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>
+
        model: jsonModel1.model
  
[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:JSON]]
+
        delegate: Component {
 +
            Text {
 +
                // Can be any of the JSON properties: model.author, model.price, etc.
 +
                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
           }
       }