typscript jet datatable loading data

edited July 2018 in Technical questions

Hi,

I try from "jet-start-typescript" to dynamically load data into a dadatable.

the data is well loaded (xhr is ok on debug view)
but nothing is displayed in the grid

export default class DataView extends JetView{
    config(){
        return {
          view:"datatable",
          columns:[
            { id:"id",     header:"", css:"rank", width:50},
            { id:"title",  header:"Film title",   width:200},
            { id:"year",   header:"Released",     width:80},
            { id:"votes",  header:"Votes",        width:100},
            { id:"rating", header:"Rating",       width:100},
            { id:"rank",   header:"rank",         width:100}
          ],
          url:"data/data.json",
          datatype:"json"
        };
    }
}
the data / data.json url is a java servlet that returns
{"data":[
    [1, "The Shawshank Redemption", 1994, 678790, 9.2, 1],
    [2, "The Godfather", 1972, 511495, 9.2, 2],
    [3, "The Godfather: Part II", 1974, 319352, 9.0, 3],
    [4, "The Good, the Bad and the Ugly", 1966, 213030, 8.9, 4],
    [5, "My Fair Lady", 1964, 533848, 8.9, 5],
    [6, "12 Angry Men", 1957, 164558, 8.9, 6]
],
pos:0
total_count:6
}

I've tried
[
    [1, "The Shawshank Redemption", 1994, 678790, 9.2, 1],
    [2, "The Godfather", 1972, 511495, 9.2, 2],
    [3, "The Godfather: Part II", 1974, 319352, 9.0, 3],
    [4, "The Good, the Bad and the Ugly", 1966, 213030, 8.9, 4],
    [5, "My Fair Lady", 1964, 533848, 8.9, 5],
    [6, "12 Angry Men", 1957, 164558, 8.9, 6]
]
or
[
    {
        id:1, title:"The Shawshank Redemption",
        year:1994, votes:678790, rating:9.2, rank:1},
    {
        id:2, title:"The Godfather",
        year:1972, votes:511495, rating:9.2, rank:2},
    {
        id:3, title:"The Godfather: Part II",
        year:1974, votes:319352, rating:9.0, rank:3},
    {
        id:4, title:"The Good, the Bad and the Ugly",
        year:1966, votes:213030, rating:8.9, rank:4},
    {
        id:5, title:"My Fair Lady",
        year:1964, votes:533848, rating:8.9, rank:5},
    {
        id:6, title:"12 Angry Men",
        year:1957, votes:164558, rating:8.9, rank:6}
]
or
{"data":[
    {
        id:1, title:"The Shawshank Redemption",
        year:1994, votes:678790, rating:9.2, rank:1},
    {
        id:2, title:"The Godfather",
        year:1972, votes:511495, rating:9.2, rank:2},
    {
        id:3, title:"The Godfather: Part II",
        year:1974, votes:319352, rating:9.0, rank:3},
    {
        id:4, title:"The Good, the Bad and the Ugly",
        year:1966, votes:213030, rating:8.9, rank:4},
    {
        id:5, title:"My Fair Lady",
        year:1964, votes:533848, rating:8.9, rank:5},
    {
        id:6, title:"12 Angry Men",
        year:1957, votes:164558, rating:8.9, rank:6}
],
pos:0
total_count:6
}

but nothing ever appears

the ultimate goal is to be able to load the data in real time using a websocket.

But before, I wish I could just load the data once;

спасибо
JYT

Comments

  • the proper data are last two.
    first for static loading, second for dynamic.
    not clear if you do not manage to parse data or to render datatable.

  • Thank for the data format
    One of the problems is that there is no error message no log no warning

  • Yep, the last format is the one which is necessary for dynamic loading ( you have a missed comma after pos attribute though )

    https://snippet.webix.com/pb535b8u

    that there is no error message no log no warning

    Be sure that you have debug:true in the app's config
    https://webix.gitbook.io/webix-jet/quick-development-guidelines

  • @maksim I saw the problem of the comma.
    My json is now validated.
    {
    "data":[
    {
    id:1, title:"The Shawshank Redemption",
    year:1994, votes:678790, rating:9.2, rank:1},
    {
    id:2, title:"The Godfather",
    year:1972, votes:511495, rating:9.2, rank:2},
    {
    id:3, title:"The Godfather: Part II",
    year:1974, votes:319352, rating:9.0, rank:3},
    {
    id:4, title:"The Good, the Bad and the Ugly",
    year:1966, votes:213030, rating:8.9, rank:4},
    {
    id:5, title:"My Fair Lady",
    year:1964, votes:533848, rating:8.9, rank:5},
    {
    id:6, title:"12 Angry Men",
    year:1957, votes:164558, rating:8.9, rank:6}
    ],
    "pos":0
    "total_count":6
    }

    The debug: true option is present

  • @sekaijin you still have a missed comma

  • oh!
    I've seen it for pos and total but not in data
    I'm try it

    A+

  • edited July 2018

    same result
    and no error message

    webix UI v.5.4.0
    and latest https://github.com/webix-hub/jet-start/tree/typescript

    I've changed
    debug : !PRODUCTION,
    to
    debug : true,
    in myapp.ts

    and in data.ts
    remove
    import {data} from "models/records";
    view.parse(data);
    add

          columns:[
            { id:"id",     header:"", css:"rank", width:50},
            { id:"title",  header:"Film title",   width:200},
            { id:"year",   header:"Released",     width:80},
            { id:"votes",  header:"Votes",        width:100},
            { id:"rating", header:"Rating",       width:100},
            { id:"rank",   header:"rank",         width:100}
          ],
          url:"data/data.json",
          datatype:"json"
    
  • edited July 2018

    your data.json content is invalid.
    while it does not matter in javascript object, in json file property names must be doublequoted.

    {
        "data": [{
                "id": 1,
                "title": "The Shawshank Redemption",
                "year": 1994,
                "votes": 678790,
                "rating": 9.2,
                "rank": 1
            },
            {
                "id": 2,
                "title": "The Godfather",
                "year": 1972,
                "votes": 511495,
                "rating": 9.2,
                "rank": 2
            },
            {
                "id": 3,
                "title": "The Godfather: Part II",
                "year": 1974,
                "votes": 319352,
                "rating": 9.0,
                "rank": 3
            },
            {
                "id": 4,
                "title": "The Good, the Bad and the Ugly",
                "year": 1966,
                "votes": 213030,
                "rating": 8.9,
                "rank": 4
            },
            {
                "id": 5,
                "title": "My Fair Lady",
                "year": 1964,
                "votes": 533848,
                "rating": 8.9,
                "rank": 5
            },
            {
                "id": 6,
                "title": "12 Angry Men",
                "year": 1957,
                "votes": 164558,
                "rating": 8.9,
                "rank": 6
            }
        ],
        "pos": 0,
        "total_count": 6
    }
    
  • edited July 2018

    As I said this morning at 8:52AM
    I corrected the problems of comma
    But it does not change anything

    edit ==>
    I made a diff between your json and mine and the only difference is
    "pos": 0, <> "pos": 0,

    So I stopped everything and I restarted without change in the files or in the json
    I do not understand but it works

    I inspected the code in chrome and webix.log is never defined
    I have no messages and no debug => webix.debug = false
    while in myapp.ts contains
    debug: true

    спасибо

  • edited July 2018

    your data.json content is invalid.
    while it does not matter in javascript object, in json file property names must be doublequoted.
  • @intregal
    I do not know how to tell you that I corrected the problems of quotes
    My JSON is valid validated with a JSON tool not in javascript

    A+JYT

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!