Use Jsonlistmodel in QML applications to help us parse JSON data

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

-How to read a local JSON file and query the file to show its contents

-How to use JavaScript to parse JSON in QML applications

In today's article, I'll introduce a method like Xmllistmodel (parsing xml) to parse our JSON. This method is simpler and more straightforward. You can refer to address https://github.com/kromain/qml-utils for an introduction to Jsonlistmodel.

Today we use the Jsonlistmodel's Web site to provide a description of the routine.

Let's start with a look at Jsonlistmodel's wording:

Jsonlistmodel.qml

/* jsonlistmodel-a QML Listmodel with JSON and JSONPath support * * Copyright (c) Romain Pokrzywka (Kdab) ([EMAIL&N Bsp;protected]) * Licensed under the MIT Licence (http://opensource.org/licenses/mit-license.php) */import QtQuick 2.0import "Jsonpath.js" as Jsonpathitem {property string Source: ' Property string JSON: ' Property string que Ry: "Listmodel model:listmodel {Id:jsonmodel} property alias Count:jsonModel.count Onsourcechang        Ed: {var xhr = new XMLHttpRequest;        Xhr.open ("GET", source); Xhr.onreadystatechange = function () {if (xhr.readystate = = xmlhttprequest.done) JSON = XHR.RESP        Onsetext;    } xhr.send (); } onjsonchanged:updatejsonmodel () Onquerychanged:updatejsonmodel () function Updatejsonmodel () {Jsonmode        L.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; }

Here, we can learn some how to package a module and make our model be used by the outside world. The notation of this module is highly recommended. For some large-scale software, we can use this method to complete our model independently and be used by other modules. UI and data segmentation can be implemented.

First, the module defines a source property. Once the source has been set, onsourcechanged will be automatically called to make the request to get the data. When the data is obtained, the JSON value changes, and onjsonchanged will be automatically called. Eventually, in Updatejsonmodel (), the Jsonmodel defined by the module will be updated to be used by the outside ListView or other control. Similarly, the model data will be re-modified whenever the query changes.

As in my previous example, it uses the Jsonpath.js module to implement the XPath query function.

In our routines, we can use Jsonlistmodel to populate our ListView with data directly:

Import QtQuick 2.0import 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"/* T The 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 (height:units.gu) page {title:i18n.tr ("test1") Column {spacing:units.gu (1) Anchors {margins:units.gu (2) fill:p Arent} label {Id:label objectName: "Label" text:i18            n.tr ("Hello..") } Button {OBJectname: "button" Width:parent.width text:i18n.tr ("Tap me!") onclicked: {label.text = i18n.tr (".. world! ")}}}}

With different queries, we can get the data under different conditions in the JSON data. The application is displayed as follows:

Source of the project in: Git clone https://gitcafe.com/ubuntu/jsonlistmodeltest.git

Use Jsonlistmodel in QML applications to help us parse JSON data