Difference between revisions of "JSONListModel"

From Qt Wiki
Jump to: navigation, search
(Add "cleanup" tag)
m
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
+
{{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.  
  
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 7: 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 20: Line 23:
 
<code>
 
<code>
 
{ "store": {
 
{ "store": {
"book": [
+
    "book": [
{ "category": "reference",
+
      { "category": "reference",
"author": "Nigel Rees",
+
        "author": "Nigel Rees",
"title": "Sayings of the Century",
+
        "title": "Sayings of the Century",
"price": 8.95
+
        "price": 8.95
},
+
      },
{ "category": "fiction",
+
      { "category": "fiction",
"author": "Evelyn Waugh",
+
        "author": "Evelyn Waugh",
"title": "Sword of Honour",
+
        "title": "Sword of Honour",
"price": 12.99
+
        "price": 12.99
},
+
      },
{ "category": "fiction",
+
      { "category": "fiction",
"author": "Herman Melville",
+
        "author": "Herman Melville",
"title": "Moby Dick",
+
        "title": "Moby Dick",
"isbn": "0-553-21311-3",
+
        "isbn": "0-553-21311-3",
"price": 8.99
+
        "price": 8.99
},
+
      },
{ "category": "fiction",
+
      { "category": "fiction",
"author": "J. R. R. Tolkien",
+
        "author": "J. R. R. Tolkien",
"title": "The Lord of the Rings",
+
        "title": "The Lord of the Rings",
"isbn": "0-395-19395-8",
+
        "isbn": "0-395-19395-8",
"price": 22.99
+
        "price": 22.99
}
+
      }
],
+
    ],
"bicycle": {
+
    "bicycle": {
"color": "red",
+
        "color": "red",
"price": 19.95
+
        "price": 19.95
}
+
    }
}
+
  }
 
}
 
}
 
</code>
 
</code>
Line 55: Line 58:
  
 
<code>
 
<code>
JSONListModel {
+
    JSONListModel {
id: jsonModel1
+
        id: jsonModel1
source: "jsonData.txt"
+
        source: "jsonData.txt"
// All books in the store object
+
        // All books in the store object
query: "$.store.book[*]"
+
        query: "$.store.book[*]"
}
+
    }
  
JSONListModel {
+
    JSONListModel {
id: jsonModel2
+
        id: jsonModel2
source: "jsonData.txt"
+
        source: "jsonData.txt"
// Books less than $10
+
        // Books less than $10
query: "$..book[?(@.price<10)]"
+
        query: "$..book[?(@.price<10)]"
}
+
    }
  
JSONListModel {
+
    JSONListModel {
id: jsonModel3
+
        id: jsonModel3
json: '[  {"label": "Answer", "value": "42"}, {"label": "Pastis", "value": "51"}, {"label": "Alsace", "value": "67"}, {"label": "Alsace", "value": "68"} ]'
+
        json: '[ \  
// Labels starting with 'A'
+
            {"label": "Answer", "value": "42"}, \
query: "$[?(@.label.charAt(0)==='A')]"
+
            {"label": "Pastis", "value": "51"}, \
}
+
            {"label": "Alsace", "value": "67"}, \
 +
            {"label": "Alsace", "value": "68"} \
 +
        ]'
 +
        // Labels starting with 'A'
 +
        query: "$[?(@.label.charAt(0)==='A')]"
 +
    }
 
</code>
 
</code>
  
Line 80: Line 88:
  
 
<code>
 
<code>
ListView {
+
    ListView {
model: jsonModel1.model
+
        model: jsonModel1.model
  
delegate: Component {
+
        delegate: Component {
Text {
+
            Text {
// Can be any of the JSON properties: model.author, model.price, etc.
+
                // Can be any of the JSON properties: model.author, model.price, etc.
text: model.title
+
                text: model.title
}
+
            }
}
+
        }
 
</code>
 
</code>
 
[[Category:snippets]]
 
[[Category:Developing_with_Qt::Qt Quick]]
 
[[Category:JSON]]
 

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