JSONListModel

From Qt Wiki
Revision as of 23:50, 27 June 2015 by Wieland (talk | contribs) (Added LangSwitch)
Jump to navigation Jump to search

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.

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