☰

解析 JSON 数据 QML

tag-icon • tag-icon qml database
解析 JSON 数据 QML

与主题一样，我正在尝试将此 json 数据解析到我的 QML 项目中

关联： http://www.rad.io/info/menu/valuesofcategory?category=_genre

所以我有 188 个元素的列表，但不知道如何获取每个元素的值......

这里是我在此示例中使用的 JSONListModel 组件的链接

这里是 qml 代码：

import QtQuick 2.0
import Ubuntu.Components 1.1
import "../components"
import Ubuntu.Components.ListItems 1.0 as ListItem


Page {
    title: i18n.tr("by Genre")


    JSONListModel {
        id: json
        source: "http://www.rad.io/info/menu/valuesofcategory?category=_genre"
        query: "$"
    }


    UbuntuListView {
        height: parent.height
        width: parent.width
        clip: true
        model: json.model
        cacheBuffer: contentHeight


        delegate: ListItem.Standard {
            text: index + "  " + indexValue
        }

    }    

}

答案1

我不是 JSONListModel 方面的专家，所以我可能搞错了，但它似乎期望迭代对象列表。您从 rad.io 获得的是字符串列表，这似乎是导致您出现问题的原因。但由于您不需要对结果进行任何花哨的处理，因此手动滚动很容易。

您要做的就是将响应解析为列表（使用JSON.parse）。然后您可以浏览列表的元素。对于每个元素，您创建一个对象并将其附加到ListModel。请注意ListModel，对象，而不是字符串。然后委托可以引用这些对象的属性。

示例代码：

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem

MainView {
    width: 300
    height: 600
    property string source: "http://www.rad.io/info/menu/valuesofcategory?category=_genre"

    ListModel {
        id: listModel
    }

    Component.onCompleted: {
        var xhr = new XMLHttpRequest;
        xhr.open("GET", source);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == XMLHttpRequest.DONE) {
                var list = JSON.parse(xhr.responseText);
                listModel.clear();
                for (var i in list)
                    listModel.append({ "genre": list[i] });
            }
        }
        xhr.send();
    }

    Page {
        title: i18n.tr("by Genre")

        UbuntuListView {
            height: parent.height
            width: parent.width
            clip: true
            model: listModel
            cacheBuffer: contentHeight

            delegate: ListItem.Standard {
                text: index + "  " + genre
            }
        }
    }
}

让我花点时间提醒你发帖的重要性简短、独立、正确的例子。您发布的代码无法运行，不是因为解析 JSON 存在任何问题，而是因为Tab不能成为顶级小部件。任何试图帮助您的人都必须先弄清楚这一点，然后才能找到真正的问题。

此外，当使用非默认组件（如）时JSONListModel，请注意这一事实并告诉我们在哪里可以找到它。重现问题所需的工作越少越好。

答案2

实际上您的 ListModel 中没有存储任何数据。

我想你正在使用这，来自 GitHub。

JSONListModel使用方法填充append(jsobject dict)来自 QtQuick ListModel。此方法需要角色和一个价值需要指定，但从 rad.io 获取的 json 数据仅包含值。

因此，ListElements 已添加到模型中，但它们不包含任何数据。您可以通过在委托中添加以下几行来检查这一点：

Component.onCompleted: {
    console.log(JSON.stringify(json.model.get(model.index)))
}

我建议你阅读从网上下载的 json 文件的内容，使用XMLHttp请求，然后解析它并将其内容添加到字符串列表（或变量）。您将能够通过 ListView 访问内容，使用模型数据角色。

相关内容