如何从 XMLHttpRequest 获取数据到 GridView QML

Question

我正在尝试以每行 5 部电影的网格显示电影。我使用预定义的电影列表。我成功从https://api.themoviedb.org/4/list/1获取数据。
这是我的代码：

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}


      }
    }
  }

以下是我在运行应用程序时需要在 GridView 中显示的属性：

但我收到无法打开图像的消息：

有人知道什么是错的吗？任何帮助将不胜感激，谢谢。

Answer 1

您缺少的是用于存储数据的模型。您错误地尝试将 GridView 的模型绑定到函数。相反，创建一个空的ListModel，然后在您的请求完成后填充该模型。当模型更新时，GridView 会自动更新。

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( {...} )
                }
            }
        }
    }
}

更新：

你现在改变了你的问题。您无法打开这些图像的原因是因为您没有使用 url 的完整路径。您的 http 请求显然正在返回相对路径。因此，只需将基本网址添加到图像名称即可。

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