[App development][JSON] The easiest way to interact with API's

Applications QML
#1

Hello everyone,

I’m trying to develop an application that will make requests to a HATEOAS API with JSON format results. (http://doc.navitia.io/)

Do you have examples of applications using JSON results with the minimal additional packages as possible ? (Since I’m beginning and struggling with the SDK I would like to avoid using JS or Python - unless it’s absolutely necessary or really the best way to do it).

@attah suggested to me to use the unofficial JSONListModel in the Sailfish Devember 3.0 post. I wandered if this is still the best way to do it, since this ‘hack’ is 9 years old (isn’t there something you can use out of the box ? like XmlListModel but for JSON ?)

Thank you all for your time, If you know a very basic app that uses such methods that I can inspire myself from I would be really thankful !

I’m also open to any tips you might give if this is the wrong approach.

#2

The reason (i think) there is nothing more official is because it doesn’t need to be more complicated. QML already interacts quite well with Javascript, and thus JSON.
Qt even refer to it somewhat officially: https://wiki.qt.io/JSONListModel

What would you like to use then?
The “logic language” in QML is Javascript.

My app S’Play is quite basic, although i hacked in pagination support in JSONListModel.

3 Likes
#3

To be honest I only know so few, so I first wandered what is the simplest way to interact with JSON results and making the requests. I imagined there was this magic library I could import in my “FirstPage.qml” file and from there being being able to make requests and get my pretty answers.

#4

I’m working on a basic weather app which is pure javascript and QML that’s supposed to be a kind fo learning app. I learned everything I’m doing from the very much more elaborate:

My app is at: https://github.com/poetaster/harbour-dwd (look at the code qml/DailyDetails).

https://api.brightsky.dev/weather?lat=50.77&lon=6.1&date=2021-5-2 gives an example of the JSON worked with

It’s evil but you can just do something this basic (Locs is the external javascript file which contains the httpRequest function):

    // A json API
    var uri = "https://api.brightsky.dev/weather?lat=" + lat + "&lon=" + lon + "&date=" + Date;
   
    // A function which returns a json docment

    Locs.httpRequest(uri, function(doc) {
        var response = JSON.parse(doc.responseText);
        // first clear the listModel of the SilicaListView
        weatherListModel.clear();
        for (var i = 0; i < response.weather.length && i < 30; i++) {
            //console.debug(JSON.stringify(response.weather[i]));
            
           // weather[i] is a json array
           // add a row to the List Model.
            weatherListModel.append(response.weather[i]);
        };
    });

But this is a very basic thing. I’

2 Likes
#5

QML with a sprinkling of Javascript is basically magic already, especially with having the HttpRequest and/or ListModel abstracted away.

@poetaster Looks pretty close to the JSONListModel really, not a whole lot to it.

1 Like
#6

Jeez. That’s less code though:) … Ok, I’m switching (although I’m also practicing javascript, I guess).

Now, maybe you can recommend how I deal with WorkerScript for a case where I need to wait for json requests in a particular order :slight_smile:

#7

Yeah, it’s all one needs, in like 50 lines. :slight_smile:

Not sure i follow the question, but run async requests and just hang on to all the data, and re-evaluate whether they are ready for combined processing at each completion?

#8

My method doesn’t supply any state information so, if I loop through 5 requests (days) the order will vary, so I can’t append like I do above.

So it looked like I need to use Workerscript to do model.set(index,var), model.sync. But I was being lazy (trying to use model.set in the loop directly will fail, and the model will be in various states of unfinished;)

I’m working on it now …

#9

I can’t claim to be familiar with WorkerScript, just assuming it is similar to a http request with async replies, to work around it taking some time. Feel free to poke me on IRC if you want me to look at something.

#10

#sailfishos on freenode?

1 Like
#11

Thank you both for your replies, I’ll try both and come back to you with my results !

#12

I usually use this my QML file - I adjust the function processData depending on JSON format. But the ListItem formatting should/could be better than I have now but I haven’t time to make it better (it’s unreleased app yet). In main.js file is this function:

function httpRequest(requestType, url, callback, params) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
//                console.log("Get response:", request.responseText);
                callback(request.responseText);
            } else {
                callback("error")
            }
        }
    }
    request.open(requestType, url);
    request.send(params);
}
1 Like