Parse json to listview in qml

Question

I'm writing a small application in qml which shows weather details in listview. I can't get any information on how to parse this complex json. I'm trying to parse it in qml. This is my json:

{
"coord":{
"lon":-0.13,
"lat":51.51
},
"weather":[
{
"id":520,
"main":"Rain",
"description":"light intensity shower rain",
"icon":"09d"
},
{
"id":310,
"main":"Drizzle",
"description":"light intensity drizzle rain",
"icon":"09d"
}
],
"base":"cmc stations",
"main":{
"temp":285.33,
"pressure":1006,
"humidity":82,
"temp_min":284.15,
"temp_max":286.15
},
"wind":{
"speed":7.7,
"deg":210,
"gust":12.9
},
"rain":{
"1h":1.4
},
"clouds":{
"all":75
},
"dt":1453904502,
"sys":{
"type":1,
"id":5091,
"message":0.0047,
"country":"GB",
"sunrise":1453880766,
"sunset":1453912863
},
"id":2643743,
"name":"London",
"cod":200
}

I tried this code but it's not working. In this code I send http request, try to parse json and show it listview.

import QtQuick 2.0

Rectangle {
    id: main
    width: 320
    height: 640
    color: 'skyblue'

    ListModel { id: listModelJson }

    Rectangle {
        height: parent.height
        width: parent.width
        ListView {
            id: listViewJson
            x: 0
            y: 0
            width: 600
            height: 592
            delegate: Rectangle {
                width: parent.width
                height: 70
            }
            model: listModelJson
        }
    }

    function getCityName() {
        var request = new XMLHttpRequest()
        request.open('GET', 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=44db6a862fba0b067b1930da0d769e98', true);
        request.onreadystatechange = function() {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status && request.status === 200) {
                    console.log("response", request.responseText)
                    var result = JSON.parse(request.responseText)
                    for (var i in result) {
                        listModelJson.append({
                                                 "name" : result[i].name,
                                                 "cod" : result[i].cod
                                             });
                    }
//                    main.cityName = result.response
                } else {
                    console.log("HTTP:", request.status, request.statusText)
                }
            }
        }
        request.send()
    }

    Component.onCompleted: {
        getCityName()
    }
}

Can you show me the way we can parse this json?

Answer 1

Found this question by google and get it done with the Documentation from ListModel QML Element.

Maybe somebody else finds this useful:

Code:

import QtQuick 2.0

Rectangle {
    width: 400
    height: 200

    ListModel {
        id: cityModel
        ListElement {
            name: "Static Sunny City"
            temp: 31.95
            attributes: [
                ListElement { description: "Tropical" },
                ListElement { description: "Cloudless" }
            ]
        }
    }

    Component {
        id: cityDelegate
        Row {
            spacing: 10
            Text { text: name }
            Text { text: temp + "°C" }
        }
    }

    ListView {
        anchors.fill: parent
        model: cityModel
        delegate: cityDelegate
    }

    Component.onCompleted: {
        cityModel.append({"name": "Append Cold City", "temp": 5.95})
        getCityJSON()
    }

    function getCityJSON() {
        var request = new XMLHttpRequest()
        request.open('GET', 'http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=44db6a862fba0b067b1930da0d769e98', true);
        request.onreadystatechange = function() {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status && request.status === 200) {
                    console.log("response", request.responseText)
                    var result = JSON.parse(request.responseText)
                    cityModel.append({
                        "name": result.name + " " + Date(result.dt * 1000),
                        "temp": result.main.temp
                    })
                } else {
                    console.log("HTTP:", request.status, request.statusText)
                }
            }
        }
        request.send()
    }
}

Answer 2

JSONListModel could be helpful for you.