诺基亚技术支持提供的 qml json 交互

来源：互联网发布：网络直播的研究意义编辑：程序博客网时间：2024/05/29 10:33

Json data

1
{"index":["all"],"flux":{"all":[{"data":{"title":"boris","icon":"icon.png"}]}}

QML side : main.qml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import QtQuick 1.0
import"parser.js"as JS
 
Item {
    id:root
    width: 360
    height: 640
 
    Component.onCompleted: JS.load()
    
 
    ListModel {  id:listModel }
 
    ListView {
        id:view
        anchors.fill:parent
        model : listModel
        delegate: Rectangle {
             width:parent.width
             height:80
             Text {
             anchors.center:parent
             text: title
             }
            
        }
    }
 
}

javascript side : parser.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function load() {
 
    listModel.clear();
    var xhr = newXMLHttpRequest();
   xhr.open("GET","http://data.json",true);
    xhr.onreadystatechange = function()
    {
        if( xhr.readyState == xhr.DONE)
        {
            if( xhr.status == 200)
            {
                var jsonObject = eval('('+ xhr.responseText + ')');
                loaded(jsonObject)
            }
        }
    }
    xhr.send();
}
 
 
 
function loaded(jsonObject)
{
    for( var index in jsonObject.flux.all   )
    {
        listModel.append({
                         "title": jsonObject.flux.all[index].data["title"],
                         "icon": jsonObject.flux.all[index].data["icon"]});
    }
 
// get directly the json object. Should work but not tested
//listModel.append({jsonObject.flux.all});
 
 
}