Oracle APEX 21集成Oracle JET时间线：如何在JavaScript代码中加载真实数据？

看起来你已经搭好了JET时间线的基础框架，现在卡在把示例数据替换成APEX页面项的JSON数据上。我来给你一步步拆解解决方案，以及排查可能的问题：

第一步：修改JavaScript代码，替换示例数据源 #

原来的代码是从本地JSON文件加载数据，我们需要把它改成从APEX页面项PX_JSON获取数据。具体修改如下：

修改后的完整代码 #

require(["require", "exports", "knockout", "ojs/ojbootstrap", "ojs/ojarraydataprovider", "ojs/ojknockout", "ojs/ojtimeline", "ojs/ojformlayout", "ojs/ojbutton"], 
function (require, exports, ko, ojbootstrap_1, ArrayDataProvider) { 
  "use strict"; 

  class SeriesModel { 
    constructor() { 
      // 从APEX页面项获取JSON数据并解析，加入异常捕获避免崩溃
      let timelineData = [];
      try {
        // 注意APEX页面项名称是大写敏感的，确保和页面上的项名称完全一致
        timelineData = JSON.parse($v('PX_JSON'));
      } catch (e) {
        console.error("解析PX_JSON数据失败: ", e);
        console.error("当前PX_JSON的原始值: ", $v('PX_JSON'));
      }

      this.dataProvider = new ArrayDataProvider(timelineData, { keyAttributes: "id" }); 
      this.overviewValue = ko.observable("on"); 
      this.orientationValue = ko.observable("horizontal"); 
      this.currentDateString = "Feb 1, 2010"; 
      this.currentDate = new Date(this.currentDateString).toISOString(); 
      this.referenceObjects = [ { value: this.currentDate } ]; 
    } 
  } 

  ojbootstrap_1.whenDocumentReady().then(() => { 
    ko.applyBindings(new SeriesModel(), document.getElementById("timelineContainer")); 
  }); 
});

第二步：排查常见问题 #

如果修改后还是无法加载数据，大概率是以下几个原因之一：

1. 页面项PX_JSON的JSON格式不符合要求 #

JET时间线要求数据结构必须包含id（唯一标识）、start（开始时间，支持ISO格式字符串或时间戳），可选字段包括end、summary、description等。你可以打开浏览器控制台（F12），执行console.log($v('PX_JSON'))，检查输出的字符串是否是有效的JSON，并且结构和示例数据一致。

比如正确的JSON格式示例：

[
  {
    "id": "task1",
    "start": "2010-01-01T00:00:00.000Z",
    "end": "2010-01-05T00:00:00.000Z",
    "summary": "项目启动",
    "description": "完成团队组建与需求初步沟通"
  },
  {
    "id": "task2",
    "start": "2010-01-06T00:00:00.000Z",
    "end": "2010-01-15T00:00:00.000Z",
    "summary": "需求分析",
    "description": "整理用户需求并输出需求文档"
  }
]

2. 页面项名称拼写错误 #

APEX页面项的名称是大写敏感的，确保你在代码中写的PX_JSON和页面上实际的项名称完全一致（包括下划线、大小写）。

3. 数据加载时机不匹配 #

如果PX_JSON是通过动态动作、AJAX或后端查询动态生成的，可能会出现JS代码执行时，页面项还没有被赋值的情况。这种情况下，你需要把时间线的初始化代码放在数据加载完成之后：

• 比如在动态动作的「执行JavaScript代码」步骤中调用ko.applyBindings，或者更新dataProvider的值。
• 可以使用APEX的apex.event.gotDocumentReady确保DOM和页面项都已加载完成，替代原代码中的ojbootstrap_1.whenDocumentReady。

4. JSON解析错误 #

代码中加入了try-catch块，你可以查看浏览器控制台的错误信息，这会帮你快速定位问题（比如JSON格式错误、页面项为空等）。

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