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

I wrote an article in my blog about "How to read and write files in a QML application" earlier in this article, which describes how to use C + + to read files. That approach is a more general approach. But for some applications, we can configure JSON to create our UI, or configure different platforms without having to write a separate setup file to do this. So how do we not need a C + + method to read the JSON file?

We can use our SDK to create one of the most basic QML applications. To be able to read the JSON file, we create a file called "Jsonparser.js":

/* Based on: * jsonlistmodel-a QML Listmodel with JSON and JSONPath support * * Copyright (c) Romain Pokrzywka (KDA B) ([email protected]) * Licensed under the MIT licence * (http://opensource.org/licenses/mit-license.php) * Https://githu B.com/s3u/jsonpath *///qt.include ("Jsonpath.js") function Readjsonfile (source, callback) {    var xhr = new XMLHttpRequest;    Xhr.open ("GET", source);    Xhr.onreadystatechange = function () {        if (xhr.readystate = = Xmlhttprequest.done) {            var doc = xhr.responsetext;//            Console.log ("JSON:" + JSON)            var json = Json.parse (DOC);            Callback.update (JSON);        }    }   Xhr.send ();}

We use the XMLHttpRequest to complete the local file request, and using the update in callback to descendant to the Qml file for parsing. To make it easier to parse the JSON file we got, we used the

Https://github.com/s3u/JSONPath

provided in the library. We can download "Jsonpath.js" to our project's root directory for easy use. Specific usage can be viewed on the web.
In order to display our JSO data, we have modified our MAIN.QML:

Import QtQuick 2.0import ubuntu.components 1.1import "Jsonparser.js" as Apiimport "Jsonpath.js" as jsonpath/*!  \brief MainView with a Label and Button Elements.*/mainview {id:main//ObjectName for functional testing purposes (AUTOPILOT-QT5) ObjectName: "MainView"//note! ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Readjsonfile.liu-xiao-guo"/ * 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) function Update (JSON) {Console.log ("        It is called in update! ");        We can start to interpret the returned JSON var authors = Jsonpath.jsonpath (JSON, "$.store.book[*].author");        Console.log ("Length:" + authors.length); for (var i in authors {Console.log ("author[" + i + "]" + authors[i]);        Mymodel.append ({"Content": authors[i], "type": "Authors"});        }//Get all of the books var books = Jsonpath.jsonpath (JSON, "$.store.book[*].title");        Console.log ("Length:" + books.length);            for (Var j in Books) {Console.log ("author[" + j + "]" + books[j]);        Mymodel.append ({"Content": books[j], "type": "Books"});        }} page {Id:mainpage title:i18n.tr ("Read Json File") Listmodel {Id:mymodel                } Component {id:sectionheading Rectangle {width:mainPage.width  Height:childrenRect.height color: "Lightsteelblue" text {text: Section font.bold:true fonT.PIXELSIZE:20}}} ListView {Id:listview Anchors.fill: Parent Model:mymodel delegate:text {text:content} section.        Property: ' Type ' section.criteria:ViewSection.FullString section.delegate:sectionHeading}            Component.oncompleted: {console.log ("Start to read JSON file"); Api.readjsonfile ("Sample.json", Main)}}

To complete our experiment, we also created a Sample.json file. The contents are as follows:

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

To run our application, our application shows the following results:

All the source code in: Git clone https://gitcafe.com/ubuntu/readjsonfile.git

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