Many QMLS should need access to Web services. We can use Javascript methods to parse and get the JSON data we need and display them. In today’s example, we’ll show how to do that. Right?

\

We could create a basic “QML App with Simple UI (QMLProject)” and call our App “Baidutranslator”. The API we will use is:

\

http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2hG67S2yRm5chkr62j2IEmYL&from=auto&to=auto&q=%E4%BD%A0%E5%A5 %BDCopy the code

The result displayed is:

{"from":"zh","to":"en","trans_result":[{"src":"\u4f60\u597d","dst":"Hello"}]}
Copy the code

We can get Chinese or English translation through this API interface, and even we can get a complete sentence in Chinese or English. The result returned by the above interface is in JSON format.

To be able to parse our resulting JSON format, we create a “jsonParser.js” file:

\

Var URL = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=2hG67S2yRm5chkr62j2IEmYL&from=auto&to=auto&q="; function startParse(keyword, callback) { var doc = new XMLHttpRequest(); doc.onreadystatechange = function() { if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) { } else if (doc.readyState  === XMLHttpRequest.DONE) { if(doc.status ! = 200) { console.log("!!! Network connection failed!" ) } else { console.log("got some results!" ); if(doc.responseText == null) { } else { console.log("result: ", doc.responseText) var json = JSON.parse('' + doc.responseText+ ''); json["status"] = "OK"; callback.update(json); } } } } doc.open("GET", URL + keyword); doc.send(); }Copy the code

\

We send the request through “startParse” and parse our results through json.parse (). We go back to our QML design with “callback.update”.

\

The design of main.qml is as follows:

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 import "jsonparser.js" as API /*! \brief MainView with a Label and Button elements. */ MainView { id: root // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "baidutranslator.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(60) height: units.gu(85) function update(json) { console.log("json: " + JSON.stringify(json)); mymodel.clear(); if ( json.trans_result ! == undefined && json.trans_result.length ! == undefined ) { for ( var idx = 0; idx < json.trans_result.length; idx++ ) { if ( json.trans_result[ idx ].dst ) { console.log( 'meaning: ' + json.trans_result[ idx ].dst); mymodel.append( {"meaning": json.trans_result[ idx ].dst }); } } } else { mymodel.clear(); } } Page { title: i18n.tr("Baidu translator") ListModel { id: mymodel } Column { spacing: units.gu(1) anchors { margins: units.gu(2) fill: parent } TextField { id: input placeholderText: "Please input a word" width: parent. Width text: "hello" onTextChanged: {myModel.clear (); var json = API.startParse(input.text, root); } } Button { id: doit width: parent.width text: i18n.tr("Translate") onClicked: { var json = API.startParse(input.text, root); } } ListView { id: listview width: parent.width height: parent.height - input.height - doit.height model: mymodel delegate: Text { text: modelData } } } } }Copy the code

Here we update our ListView with “Update”.

\

  \

\

The source code for all projects is available at: github.com/liu-xiao-gu…

\