ZUL页面使用widgetModel传flexible search数据报LazyList未定义错误

Hybris FlexibleSearch 的search()方法返回的SearchResult.getResult()是懒加载实现类LazyLoadModelList，不是标准的ArrayList。你直接将该对象传入WidgetModel，前端模板渲染为JS变量时，会输出该对象的序列化内容，其中包含LazyList类标识，JS执行时会将其识别为未定义的变量，因此抛出该错误。
另外你直接将后端OrderModel对象传递到前端还存在序列化失败、敏感字段泄露、懒加载属性触发额外查询等隐患。

方案1：快速修复（仅临时测试使用） #

在DAO层将懒加载列表转换为普通ArrayList后再返回即可，同时修正空返回的问题：

public class OrdersDataDao {
    @Resource
    private FlexibleSearchService flexibleSearchService;

    public List<OrderModel> getAllOrders() {
        final String stringQuery = "select {o.pk} from {order as o}";
        final FlexibleSearchQuery query = new FlexibleSearchQuery(stringQuery);
        final SearchResult<OrderModel> result = flexibleSearchService.search(query);
        // 转成普通ArrayList，空结果返回空列表避免空指针
        return result.getResult() == null ? Collections.emptyList() : new ArrayList<>(result.getResult());
    }
}

方案2：正式项目规范方案 #

先将OrderModel转换为仅包含前端所需字段的DTO对象，再序列化为JSON字符串传递到前端：

1. 定义订单DTO类，仅保留前端需要的字段（比如订单号、金额、下单时间等）
2. 控制器中将查询结果转为DTO列表，再序列化为JSON存入WidgetModel：

@Override
public void preInitialize(Component comp) {
    super.preInitialize(comp);
    WidgetModel model = getWidgetInstanceManager().getModel();
    List<OrderModel> orderList = customGraphService.getAllOrders();
    // 把OrderModel转成自定义的OrderDTO列表
    List<OrderDTO> orderDTOList = orderList.stream().map(order -> {
        OrderDTO dto = new OrderDTO();
        dto.setCode(order.getCode());
        dto.setTotalPrice(order.getTotalPrice());
        dto.setPlaceTime(order.getCreationtime());
        // 其他需要的字段赋值
        return dto;
    }).collect(Collectors.toList());
    // 序列化为JSON字符串
    ObjectMapper objectMapper = new ObjectMapper();
    String ordersJson = objectMapper.writeValueAsString(orderDTOList);
    model.put("ordersJson", ordersJson);
}

3. 前端ZUL代码修改，正确解析JSON：

window.onload = function () {
    const myChart = new Chart(
            document.getElementById('myChart'),
            config
    );
    // 注意用[(${})]输出未转义的原始字符串，再转成JS对象
    const test = JSON.parse([(${widgetModel.ordersJson})]);
    console.log(test);
};

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