ListModel data from JSON without .append() loop

[shokarta]

Dear all,

im getting JSON data from XMLHttpRequest(), and the data are huge.
lets say 10000 rows (each if its own array) which I have to add into ListModel.

so far im using:

// Populate Model
function populateRecordsGrouped() {
    console.log("start " + new Date().getTime());
    var array_records = httpRequest();  // this gives me array from JSON from XMLHttpRequest(), i guess no need to specify
    for (var ix = 0; ix < array_records.length; ++ix) {
        myModelGrouped.append({"serialNumber": "",
                               "material": array_records[ix]['material'],
                               "batch": array_records[ix]['batch'],
                               "amount": array_records[ix]['amount'],
                               "location": array_records[ix]['location']});
    }
    console.log("end " + new Date().getTime());
}

so is there better/faster way than looping?
I have noticed this link:
https://blog.felgo.com/cross-platform-app-development/avoid-cpp-models-qt
which is using AppListView instead, where they just simply asset all data at once like:

  // on app start: fetch data from REST api
  Component.onCompleted: {
    HttpRequest.get("https://jsonplaceholder.typicode.com/todos")
    .timeout(5000)
    .then(function(res) { dataFetched(res.body) })
    .catch(function(err) { console.err("Fetch failed:"+err) });
  }
  
  // dataFetched gets called on success of http request
  function dataFetched(jsonData) {
    listView.model = jsonData // set retrieved json data as model for list
  }
  
  // list page
  NavigationStack {
    Page {
      title: "Todo List"
      
      AppListView {
        id: listView
        anchors.fill: parent
        
        delegate: SimpleRow {
          text: modelData.title
        }
      }
    }
  }

so is there something I could use for ListModel the same/similar way?
cause looping thought 10.000 records (each its own array) takes roughly 8 seconds :(

[jeremy_k]

Is the intention to support updating the model in place? If not, a json array can be directly used as a model.

    property var jsonModel: JSON.parse('[ {"data": "one", "data2": "1"}, {"data": "two", "data2": "2"} ]')
    ListView {
        id: view
        anchors.fill: parent
        model: jsonModel
        delegate: Text {
            text: modelData.data + ":" + modelData.data2
        }
    }

If the model does need to be updated in place, and using C++ instead of javascript isn't an option, the threaded ListModel example demonstrates using WorkerScript to avoid blocking the UI thread.

[GrecKo]

If the model needs to be updated (even if not), I would advise to use https://github.com/benlau/qsyncable and its JsonListModel. It's a QAbstractListModel under the hood that calculates the diff between the new and old model and only emit the necessary signals (dataChanged, rowInserted/Removed), no complete model reset and delegate deletion/recreation.