问题描述:

Am a new bee to vaadin. I have to show the data from a JSON file (which is fetching from MySQL db) in Grid/Table(vaadin). I am able show the data in table if JSON in the below format.

[

{

"id": "ex-wardrobe",

"productId": "ex-wardrobe",

"name": "exWardrobe",

"desc": "Some description",

"dimension": "WxDxH 148\" X 24\" X 112\" ",

"category": "Bedroom",

"subcategory": "Wardrobe",

"categoryId": "bedroom",

"subcategoryId": "wardrobe",

"tags": "all, Space Design Bedroom, Space Details Wardrobe",

"designer": "hb",

"curr": "INR",

"popularity": "1",

"relevance": "1",

"shortlisted": "1",

"likes": "1",

"createDt": "",

"pageId": "ex-wardrobe",

"styleName": "Fresh",

"styleId": "cfresh",

"priceRange": "Premium",

"priceId": "premium",

"defaultPrice": "123",

"defaultMaterial": "MDF ",

"defaultFinish": "LAMINATE"

}

]

But, if i get JSON(data is related to same product) in the below format am unable to add data in table.

[

{

"id": "ex-wardrobe",

"productId": "ex-wardrobe",

"name": "exWardrobe",

"desc": "Some description",

"dimension": "WxDxH 148\" X 24\" X 112\" ",

"category": "Bedroom",

"subcategory": "Wardrobe",

"categoryId": "bedroom",

"subcategoryId": "wardrobe",

"tags": "all, Space Design Bedroom, Space Details Wardrobe",

"designer": "hb",

"curr": "INR",

"popularity": "1",

"relevance": "1",

"shortlisted": "1",

"likes": "1",

"createDt": "",

"pageId": "ex-wardrobe",

"styleName": "Fresh",

"styleId": "cfresh",

"priceRange": "Premium",

"priceId": "premium",

"defaultPrice": "123",

"defaultMaterial": "MDF ",

"defaultFinish": "LAMINATE",

"mf": [

{

"basePrice": "123",

"material": "MDF ",

"finish": "LAMINATE"

}

],

"images": [

"066___ex_WARDROBE_Dim.jpg",

"067___ex_WARDROBE_close_door.jpg",

"068___ex_DOVE_dim.jpg"

],

"components": [],

"accessories": []

}

]

This is the code which am using to show JSON data in table,

 Table grid = new Table();

root.addComponent(grid);

grid.setStyleName("iso3166");

grid.setPageLength(6);

grid.setSizeFull();

grid.setSelectable(true);

grid.setMultiSelect(false);

grid.setImmediate(true);

grid.setColumnReorderingAllowed(true);

grid.setColumnCollapsingAllowed(true);

try {

JSONArray products = productsDataProvider.getCatalogs();

JsonContainer dataSource =

JsonContainer.Factory.newInstance(products.toString());

grid.setContainerDataSource(dataSource);

grid.setColumnReorderingAllowed(true);

grid.setWidth("98%");

grid.addStyleName(ChameleonTheme.TABLE_STRIPED);

} catch (IllegalArgumentException ignored) {

}

grid.setWidth("100%");

grid.setHeight("100%");

root.addComponent(grid);

Am stuck on this and i have sleepless night on this. Million tons of thanks in advance. I hope you GURU's can help me in this :)

网友答案:

Sorry not vaadin expert. See it first time and like it. I guess your problem are the arrays inside your object. I mean this:

"mf": [
  {
    "basePrice": "173881",
    "material": "MDF ",
    "finish": "LAMINATE"
  }
],
"images": [
  "066___ex_WARDROBE_Dim.jpg",
  "067___ex_WARDROBE_close_door.jpg",
  "068___ex_DOVE_dim.jpg"
],
"components": [],
"accessories": []

No idea how the component should display this. Have you tried it without mf, images, components and accessories?

网友答案:

You are using a very simple JSONContainer. As can be seen in the source code, this implementation does not support nested / compound elements and arrays.

First you have to ask yourself how these complex objects need to be displayed (UX), especially the "mf" field.

UPDATE

Simple compound objects (like "simpleCompound": {"name": "foo", number: 123}) can be shown in a table column (not supported by the JSONContainer you use, but similar functionality is available by the BeanItemContainer, so look there for how to implement this functionality).

The array fields are more problematic from a UX standpoint. Mostly this information is only shown on demand or in separate panels. The Vaadin Grid component offers the possibility to show a details view, see the wiki. Maybe that will fit your requirements.

网友答案:

Currently nested json data is not supported unless you create your own advance template for that. There is currently an online json container application demo that is used to test if the data is really json or json array but not nested. Then it displays that data in grid table. So you can use this to verify your data.

You can also get the application template with source code on github

相关阅读:
Top