Qooxdoo中SQLite查询数据填充List组件失败求助

之前解决过SQLite查询的Bug，现在在将SQLite查询返回的数据整合到Qooxdoo的List组件时遇到问题：把服务器返回的响应内容复制为本地变量时，List组件能正常显示数据；但直接使用服务器响应数据时，会出现报错。

相关代码 #

// 本地测试用变量（复制服务器响应内容）
// variable =  [{"pajarillo": "comsan", "conteo": 1}, {"pajarillo": "eursco1", "conteo": 1}, {"pajarillo": "mutswa", "conteo": 1}, {"pajarillo": "blared1", "conteo": 8}, {"pajarillo": "carcro1", "conteo": 11}, {"pajarillo": "tawowl1", "conteo": 3}, {"pajarillo": "commoo3", "conteo": 1}, {"pajarillo": "houspa", "conteo": 16}, {"pajarillo": "humvoc", "conteo": 2}, {"pajarillo": "eurgol", "conteo": 1}, {"pajarillo": "whiwag", "conteo": 14}, {"pajarillo": "grywag", "conteo": 5}, {"pajarillo": "belmin1", "conteo": 1}, {"pajarillo": "eurbla", "conteo": 5}, {"pajarillo": "comchi1", "conteo": 4}, {"pajarillo": "rocpig", "conteo": 2}, {"pajarillo": "cowpig1", "conteo": 1}, {"pajarillo": "eurrob1", "conteo": 32}, {"pajarillo": "watrai1", "conteo": 1}, {"pajarillo": "firecr1", "conteo": 19}, {"pajarillo": "goldcr1", "conteo": 5}, {"pajarillo": "sonthr1", "conteo": 1}];

var win = new qx.ui.window.Window("Detectadas");
win.setWidth(300);
win.setHeight(200);
win.setShowMinimize(false);

var composite = new qx.ui.container.Composite();

win.setLayout(new qx.ui.layout.VBox(5));
win.setShowStatusbar(true);
win.setStatus("Aves detectadas con BirdNet");
win.open();

var atom = new qx.ui.basic.Atom(
    "Listado de aves detectadas con BirdNet");

var oneList = new qx.ui.form.List();
oneList.set({ height: 280, width: 150, selectionMode: "one" });

const req = new qx.io.request.Xhr("http://__:8081/getData");
req.send();

req.addListener("success", function(e) 
{
    const resp = e.getTarget();
    variable = resp.getResponse();
    console.log(variable);
    win.setStatus( "Consulta completada.");
    
    oneList.set({ height: 280, width: 150, selectionMode: "one" });
  
    var tmp= [{"pajarillo": "", "conteo": ""} ];
    var model__lista_empresas = qx.data.marshal.Json.createModel( tmp);
    var controller__lista_empresas = new qx.data.controller.List( model__lista_empresas, oneList, "pajarillo", "conteo"); 
    controller__lista_empresas.setModel( qx.data.marshal.Json.createModel( variable));
}, this);      

/* 本地测试代码（能正常运行）
var tmp= [{"pajarillo": "", "conteo": ""} ];
var model__lista_empresas = qx.data.marshal.Json.createModel( tmp);
var controller__lista_empresas = new qx.data.controller.List( model__lista_empresas, oneList, "pajarillo", "conteo"); 
controller__lista_empresas.setModel( qx.data.marshal.Json.createModel( variable));
*/       
        
win.add( composite);
win.add( atom);
win.add( oneList);

this.getRoot().add(win, {left:20, top:20});
win.open()

解决方向 #

• 检查响应数据类型：服务器返回的可能是JSON字符串而非解析后的对象，可手动解析或设置响应类型：

  // 手动解析
  variable = JSON.parse(resp.getResponse());
  // 或设置请求响应类型
  req.setResponseType("json");
  

• 避免重复创建控制器：将List控制器初始化移到请求回调外部，仅在回调中更新模型，避免重复绑定导致冲突：

  // 初始化控制器（放在请求外）
  var tmp = [{"pajarillo": "", "conteo": ""} ];
  var model__lista_empresas = qx.data.marshal.Json.createModel(tmp);
  var controller__lista_empresas = new qx.data.controller.List(model__lista_empresas, oneList, "pajarillo", "conteo"); 
  
  // 请求回调中只更新模型
  req.addListener("success", function(e) 
  {
      const resp = e.getTarget();
      var variable = resp.getResponse();
      if (Array.isArray(variable)) {
          controller__lista_empresas.setModel(qx.data.marshal.Json.createModel(variable));
      } else {
          console.error("响应数据不是数组格式");
      }
      win.setStatus("Consulta completada.");
  }, this);
  

• 验证响应数据结构：通过console.log(variable)确认服务器返回的数据结构和本地测试变量完全一致，排查是否存在字段名不一致、多余外层对象等问题。

内容的提问来源于stack exchange，提问作者Jesús González