We know that JSON data is widely used in many Web services. It has been mentioned in my previous articles:

\

– How to read a local Json file and query the file to display its contents

– How to parse JSON using Javascript in QML applications

\

In today’s article, I’ll introduce a method like XmlListModel (parsing XML) to parse our JSON. This method is much simpler and more straightforward. An introduction to JSONListModel can be found at github.com/kromain/qml… .

\

We’ll use the routines provided in the JSONListModel url to illustrate this today.

\

Let’s look at JSONListModel first:

\

JSONListModel.qml

\

/* JSONListModel - a QML ListModel with JSON and JSONPath support
 *
 * Copyright (c) 2012 Romain Pokrzywka (KDAB) ([email protected])
 * Licensed under the MIT licence (http://opensource.org/licenses/mit-license.php)
 */

import QtQuick 2.0
import "jsonpath.js" as JSONPath

Item {
    property string source: ""
    property string json: ""
    property string query: ""

    property ListModel model : ListModel { id: jsonModel }
    property alias count: jsonModel.count

    onSourceChanged: {
        var xhr = new XMLHttpRequest;
        xhr.open("GET", source);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE)
                json = xhr.responseText;
        }
        xhr.send();
    }

    onJsonChanged: updateJSONModel()
    onQueryChanged: updateJSONModel()

    function updateJSONModel() {
        jsonModel.clear();

        if ( json === "" )
            return;

        var objectArray = parseJSONString(json, query);
        for ( var key in objectArray ) {
            var jo = objectArray[key];
            jsonModel.append( jo );
        }
    }

    function parseJSONString(jsonString, jsonPathQuery) {
        var objectArray = JSON.parse(jsonString);
        if ( jsonPathQuery !== "" )
            objectArray = JSONPath.jsonPath(objectArray, jsonPathQuery);

        return objectArray;
    }
Copy the code

\

Here, we can learn how to wrap a module and make our model available to the outside world. The way this module is written is highly recommended. For some large software, we can use this method to complete our model independently and be used by other modules. UI and data can be separated.

\

First, the module defines a source attribute. Once the Source has been set, onSourceChanged is automatically called, making a request to get the data. When the data is available and the VALUE of the JSON changes, onJsonChanged is automatically called. Finally, in updateJSONModel(), the jsonModel defined by the module will be updated to be used by an external ListView or other Control. Similarly, the Model data is remodified every time the Query changes.

\

As in my previous examples, it uses the jsonPath.js module to implement xpath’s query capabilities.

\

In the routine, we can use JSONListModel directly to populate our ListView with data:

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "test1.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(100) height: units.gu(75) Page { title: i18n.tr("test1") Column { spacing: units.gu(1) anchors { margins: units.gu(2) fill: parent } Label { id: label objectName: "label" text: i18n.tr("Hello.." ) } Button { objectName: "button" width: parent.width text: i18n.tr("Tap me!" ) onClicked: { label.text = i18n.tr(".. world!" )}}}}}Copy the code

\

jsonData.txt

\

{ "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}}}Copy the code


\

\

With different queries, we can get JSON data under different conditions. The application looks like this:

\



\

Project source at: github.com/liu-xiao-gu…

\

\