CODEWITHSUNDEEP
jsonqml
JRii
JRii

Reputation: 23

Parsing json to listmodel

I'm partly succeeding with parsing json to my qml appl, but only partly. I can output countryCode and countryName just fine via console.log(), end target is still to append json parsed data to listmodel. Cannot still output bigmac_index with year and actual data data part .

Obviously have tried different solution and tried to apply given answers from subject, but unsuccessfully. Would appreciate from working solution :)

json part: [ { "countryCode": "fi", "countryName": "Finland", "bigmac_index": [ { "year": "2013", "data": "5.27" }, { "year": "2012", "data": "4.55" }, { "year": "2011", "data": "5.38" } ] } ]

Here's function what I'm using :

    function request(url, callback) {
        var xhr = new XMLHttpRequest();

        console.log("xhr.send executed")

        xhr.onreadystatechange = (function()
        {
            console.log("xhr readystate ", xhr.readyState)
            if(xhr.readyState == 4 && xhr.status == 200)
                {
                    console.log("readyState == 4, starting to parse")
                    var parseData = JSON.parse(xhr.responseText);

                    for ( var index in parseData)
                    {
                  console.log("countrycode, ", parseData[index].countryCode)              
                  console.log("countryName, ", parseData[index].countryName)
                  console.log("datakey, ", parseData[index].bigmac_index) 

                  //Attemp to parse to ListModel

                  lmodel.append
                  ({
                          "countryCode" : parseData.countryCode,
                          "countryName" : parseData[index].countryName,
                          "datakey" : parseData[index].bigmac_index
                   })}
                }

            else
            {
                console.log("readyState, ", xhr.readyState)
            }
        }

        );
        xhr.open('GET', url, true);
        xhr.send();
    }

json structure + api data: http://blog.inqubu.com/inqstats-open-api-published-to-get-demographic-data

Upvotes: 0

Views: 4571

Answers (1)

folibis
folibis

Reputation: 12874

Welcome to SO, @JRii! First of all, you should read this page before asking a question. As for your question - all you do is right but you didn't provide your QML code, so it is impossible to understand what you do wrong. Anyway that should work:

Suppose the data is:

[
    {
        "countryCode": "us",
        "countryName": "USA",
        "population": [
            {
                "year": "2014",
                "data": "318857056"
            },
            {
                "year": "2013",
                "data": "316497531"
            },
            {
                "year": "2012",
                "data": "314112078"
            },
            {
                "year": "2011",
                "data": "311721632"
            },
            {
                "year": "2010",
                "data": "309347057"
            }
        ]
    }
]

The QML code that should parse and display the data:

ListView {
    anchors.fill: parent
    model: ListModel { id: model}
    delegate: Text { text: "[" + year + "]: " + population }
    Component.onCompleted: {
        var xhr = new XMLHttpRequest;
        xhr.open("GET", "http://inqstatsapi.inqubu.com/?api_key=YOURKEYHERE&data=population&countries=us");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                var data = JSON.parse(xhr.responseText);
                model.clear();
                var list = data[0]["population"];
                for (var i in list) {
                    model.append({year: list[i]["year"], population: list[i]["data"]});
                }
            }
        }
        xhr.send();
    }
}

Upvotes: 8

Related Questions