Component.onCompleted加载JSON到QML ListView报错及无数据排查

常见问题点及修复方案 #

1. JSON未正确解析为可识别的Model结构 #

QML的ListView无法直接识别原始JSON字符串，必须先将其解析为JavaScript数组或ListModel对象。如果直接把JSON字符串赋值给model，委托里访问code/name时就会找不到对应属性，触发ReferenceError。

修复示例：

ListView {
    id: listView
    width: 200
    height: 400

    delegate: Text { text: model.code + " - " + model.name }

    Component.onCompleted: {
        // 示例JSON字符串
        let jsonStr = '[{"code":"001","name":"测试1"},{"code":"002","name":"测试2"}]';
        // 解析为JS数组
        let dataArray = JSON.parse(jsonStr);
        // 赋值给ListView的model
        listView.model = dataArray;
    }
}

2. 委托中属性引用方式错误 #

如果委托里直接写text: code而不是model.code，QML会在当前上下文查找code变量，而非model项的属性，从而抛出ReferenceError。

正确的委托写法：

delegate: Text {
    // 必须通过model.前缀访问项属性
    text: model.code + " | " + model.name
}

3. JSON数据本身存在语法错误 #

检查你的JSON是否符合标准格式：比如字符串用双引号、数组/对象末尾无多余逗号、键名必须双引号包裹。如果JSON语法错误，JSON.parse()会失败，model会是空值，自然无法显示数据。

4. 未使用ListModel包装（可选，适合动态数据场景） #

如果后续要支持动态修改数据（比如从数据库加载后更新），建议用ListModel来包装数据，更符合QML的数据绑定机制：

ListView {
    id: listView
    width: 200
    height: 400

    model: ListModel { id: listModel }
    delegate: Text { text: model.code + " - " + model.name }

    Component.onCompleted: {
        let jsonStr = '[{"code":"001","name":"测试1"},{"code":"002","name":"测试2"}]';
        let dataArray = JSON.parse(jsonStr);
        // 逐个添加到ListModel
        dataArray.forEach(item => {
            listModel.append(item);
        });
    }
}

总结 #

先确认JSON语法正确，再通过JSON.parse()将其转为JS数组或ListModel，最后在委托中通过model.属性名的方式访问数据，就能解决ReferenceError和ListView不显示的问题。

内容的提问来源于stack exchange，提问作者Mendes