oracle Jet - 用 json 填充基本表答案

【问题标题】：oracle Jet - populating basic table with jsonoracle Jet - 用 json 填充基本表
【发布时间】：2018-10-17 10:02:52
【问题描述】：

更新

我相信我发现了错误。我更改了 JSON 数据，发现我设法在 HTML 的最后一个 HeaderText 行上添加了一个“，”。删除它，现在它正在将数据正确推送到表中..

我正在尝试用一些 JSON 数据填充一个表，但我得到的只是这个错误：

Uncaught Error: oj-table with id 'table1': Unable to parse columns='[
            {headerText: "ID", field: "id"},
            {headerText: "Name", field: "name"},
            {headerText: "Username", field: "username"},
            {headerText: "E-mail", field: "email"},
            ]' for OJ-TABLE with id table1 to a JSON Object. Check the value for correct JSON syntax, e.g. double quoted strings. SyntaxError: Unexpected token h in JSON at position 19
at Object._throwError (ojcustomelement.js:514)
at _coerceVal (ojcustomelement.js:1110)
at Object.oj.BaseCustomElementBridge.__ParseAttrValue (ojcustomelement.js:1124)
at Object.oj.BaseCustomElementBridge.__InitProperties (ojcustomelement.js:1028)
at Object.InitializeElement (ojcomponentcore.js:5504)
at Object._connected (ojcustomelement.js:378)
at HTMLElement._connectedCallback [as connectedCallback] (ojcustomelement.js:404)
at Object.setDomNodeChildren (knockout-3.4.2.debug.js:288)
at Object.setDomNodeChildren (knockout-3.4.2.debug.js:2827)
at Object.oj.CompositeTemplateRenderer.renderTemplate (ojcomposite-knockout.js:105)

我使用https://jsonplaceholder.typicode.com/users 作为我的 JSON 源。我想将数据推送到指定的列中。我错过了什么？我在 Google 上找到的内容与我的代码非常相似，而且文档对我帮助不大。

我想指出，我是 JET 的新手，之前我没有太多使用 JSON 数据。

我的代码如下所示

HTML

<oj-table id='table1' aria-label='testTable'
  data='[[dataSource]]'
  columns='[
            {headerText: "ID", field: "id"},
            {headerText: "Name", field: "name"},
            {headerText: "Username", field: "username"},
            {headerText: "E-mail", field: "email"},
            ]'
  style='width: 50%;'>

define(
['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojtable', 'ojs/ojarraytabledatasource'], 
function (oj, ko, $) {
    function testTable() {
        var self = this;          
        self.data = ko.observableArray();
        $.getJSON("https://jsonplaceholder.typicode.com/users").
            then(function (users) {
                $.each(users, function() {
                    self.data.push({
                        id: this.id,
                        name: this.name,
                        username: this.username,
                        email: this.email
                    });
                });
            });
        self.dataSource = new oj.ArrayTableDataSource(
            self.data,
            {idAttribute: 'id'}
        );
    }             
        return testTable;
});

【问题讨论】：

标签： html knockout.js oracle-jet

【解决方案1】：

这个错误非常简单，希望这个小改动就足够了：在您的 HTML 列定义中，也为键使用双引号，而不仅仅是值。

<oj-table id='table1' aria-label='testTable'
  data='[[dataSource]]'
  columns='[
        {"headerText": "ID", "field": "id"},
        {"headerText": "Name", "field": "name"},
        {"headerText": "Username", "field": "username"},
        {"headerText": "E-mail", "field": "email"},
        ]'
  style='width: 50%;'>

【讨论】：

谢谢，但不幸的是，这不是我的问题的解决方案。我已经通过 ojet-cli 创建了应用程序，如果重要的话，我也用它创建了组件。
我得到了和以前一样的错误，不是因为你的代码有问题，而是因为“，”我设法在源代码的末尾偷偷溜进去了。

【解决方案2】：

除了应该为键添加双引号之外，您还应该在最后一行声明中添加额外的 coma(,)...

<oj-table id='table1' aria-label='testTable'
  data='[[dataSource]]'
  columns='[
        {"headerText": "ID", "field": "id"},
        {"headerText": "Name", "field": "name"},
        {"headerText": "Username", "field": "username"},
        {"headerText": "E-mail", "field": "email"}
        ]'
  style='width: 50%;'>

这应该可以工作...

【讨论】：