How to fetch data from XMLHttpRequest to GridView QML

Question

I am trying to show movies in a grid with 5 movies per row. I use a predefined movie list. I successfully fetched data from https://api.themoviedb.org/4/list/1.
Here is my code:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 1920
    height: 1080
    visible: true
    title: qsTr("Hello World")
    Component.onCompleted: {
        mojgrid.focus = true
    }

    function dobioResponseNapraviModel(response) {
        console.log("dobioResponseNapraviModel", typeof response)

        mojgrid.model=response
    }

    function request(){
        console.log("BOK")

        const xhr=new XMLHttpRequest()
        const method="GET";
        const url="http://api.themoviedb.org/4/list/1";
        xhr.open(method, url, true);
        xhr.setRequestHeader( "Authorization", 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5YjBkOGVlMGQzODdiNjdhYTY0ZjAzZDllODM5MmViMyIsInN1YiI6IjU2MjlmNDBlYzNhMzY4MWI1ZTAwMTkxMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.UxgW0dUhS62m41KjqEf35RWfpw4ghCbnSmSq4bsB32o');
        xhr.onreadystatechange=function(){
            if(xhr.readyState===XMLHttpRequest.DONE){
                var status=xhr.status;
                if(status===0 || (status>=200 && status<400)){
                    //the request has been completed successfully
//                    console.log(xhr.responseText.results)
                    dobioResponseNapraviModel(JSON.parse(xhr.responseText).results)
               }else{
                    console.log("There has been an error with the request", status, JSON.stringify(xhr.responseText))
                }
            }
        }
        xhr.send();
    }





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

        xhr.open("GET", url, true)

        xhr.onreadystatechange = function() {
            if(xhr.readyState===4) {


                callback(xhr.responseText)


            }
        }
        xhr.open("GET", url)
        xhr.setRequestHeader( "Authorization", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5YjBkOGVlMGQzODdiNjdhYTY0ZjAzZDllODM5MmViMyIsInN1YiI6IjU2MjlmNDBlYzNhMzY4MWI1ZTAwMTkxMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.UxgW0dUhS62m41KjqEf35RWfpw4ghCbnSmSq4bsB32o');
        xhr.send()

    }*/




    GridView {
        id:mojgrid
        anchors.fill: parent


        Keys.onUpPressed: {
            request()
        }
      delegate: Rectangle{ id: rect; width:500;height: 400; color:'gray'
          Image{ anchors.fill:parent
                 fillMode: Image.PreserveAspectFit
                 source:modelData.backdrop_path

          }
          Text{ text:modelData.original_title}


      }
    }
  }

Here are the properties I need to show in GridView when I run the application:

But I get message that the image cannot be opened:

Does anybody have any idea what is wrong? Any help would be appreciated, thank you.

Answer 1

What you're missing is a model to store the data in. You are incorrectly trying to bind the GridView's model to a function. Instead, create an empty ListModel, and then when your request is complete, populate that model. The GridView will then update automatically when the model updates.

ListModel {
    id: movieModel
}

GridView {
    ...

    model: movieModel
}

Component.onCompleted: {
    request()
}

function request() {
    ...

    xhr.onreadystatechange=function(){
        if(xhr.readyState===XMLHttpRequest.DONE){
            var status=xhr.status;
            if(status===0 || (status>=200 && status<400)){
                // Parse response data and append it to your model
                for (var i = 0; ...) {
                    movieModel.append( {...} )
                }
            }
        }
    }
}

UPDATE:

You've changed your question now. The reason you can't open those images is because you are not using the full path of the url. Your http request is apparently returning relative paths. So just prepend the base url to the image name.

source: "http://api.themoviedb.org/4/list/1" + modelData.backdrop_path