knockout.js oracle Jet -使用json填充基本表

dly7yett  于 2022-11-10  发布在  Oracle
关注(0)|答案(2)|浏览(140)

更新

我想我已经发现了错误。我修改了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%;'>

JS系统

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;
});
wribegjk

wribegjk1#

这个错误非常简单,希望这个小改动就足够了:在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%;'>
dy1byipe

dy1byipe2#

在最后一行声明中添加一个额外的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%;'>

这应该可以...

相关问题