JSONListModel: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(7 intermediate revisions by 4 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 18: 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 53: 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 78: 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
            }
        }