Json data with sub-objects

[aigleborgneParticipant]

Hello,

I’m new to jQWidgets and I’m trying to see if it would work in my application based on Angular JS.
Server-side, I’m using a J2EE application that send json data by ajax-call. This means I could potentially create DTO if necessary but I’m trying to avoid it.

Let’s see a common hierarchical structure I will use: an object with 4 attributes: id, name, parent, children. To clarify my example, this object is named Category. To reduce data sent, either I put parent, either I put children, not both.

Example with parent:
[
{ id: 1, name: ‘CAT1’, parent: null },
{ id: 2, name: ‘CAT1-1’, parent: { id: 1, name: ‘CAT1’, parent: null } },
{ id: 3, name: ‘CAT1-2’, parent: { id: 1, name: ‘CAT1’, parent: null } },
{ id: 4, name: ‘CAT2’, parent: null }
]

Example with children:
[
{ id: 1, name: ‘CAT1’, children: [{ id: 2, name: ‘CAT1-1’, children: null }, { id: 3, name: ‘CAT1-2’, children: null }] },
{ id: 4, name: ‘CAT2’, parent: null }
]

Ideally, children way is better because there are not redundant data.

Now, back to subject, I’m trying to output a hierchical data (to use with tree component):
var categories = []; // json array, init by angular resource
var source = {
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘parent’ },
{ name: ‘name’ }
],
id: ‘id’,
localdata: categories
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parent.id’, null, [{ name: ‘name’, map: ‘label’}]);

This doesn’t work because I suspect ‘parent.id’ isn’t read as I want to.

Even more difficult to write it with items as it seems that parent id is still necessary ? Even then, my items are not converted correctly:

var source = {
datatype: “json”,
datafields: [
{ name: ‘id’ },
{ name: ‘children’ },
{ name: ‘name’ }
],
id: ‘id’,
localdata: categories
};
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
var records = dataAdapter.getRecordsHierarchy(‘id’, null, ‘items’, [{ name: ‘name’, map: ‘label’}, { name: ‘children’, map: ‘items’}]);

Root elements are good but children miss their label because they haven’t been converted name->label. And I don’t know if null for parent-id is problematic later on.

I will try to make it work, but documentation is quite light to my tastes

[Peter StoevKeymaster]

Hi aigleborgne,

You may look at this help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm. To load your ‘id’ and ‘name’ fields, you will have to use mapping. In the help topic, take a look at the section about mapChar with the sample. It should be helpful.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[aigleborgneParticipant]

Hello Peter,

Thank you for your answer. I haven’t read carefully and it worked fine with your example.
I have also experimented with my own DTO in the proper format. It was a success, obviously.

My last unsolved problem is the use of ‘items’ in getRecordsHierarchy. The last parameter specifies the mapping between the Data Source fields and custom data fields. It applies to the main object but there is no mapping for item object ? (which may be identical or not to the main object). Maybe, items weren’t destined to be used as children in a tree?

All in all, I’m satisfied with the 2 first solutions, especially the second one, as it costs too much to send all parents of each element.

[Peter StoevKeymaster]

Hi aigleborgne,

To be honest, I do not understand why you try to use “getRecordsHierarchy” when you already have a hierarchy. “getRecordsHierarchy” is a method which is designed to turn a flat List to a Hierarchy List as in our demo. With your JSON, you just have to make it to match the expected format i.e instead of “children”, use “items” and the item’s text is looking for a “label” member.

Example:

           var source = [
            {
                icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                  { icon: "../../images/calendarIcon.png", label: "Calendar" },
                  { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
            },
            {
                icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                 { icon: "../../images/folder.png", label: "Admin" },
                 { icon: "../../images/folder.png", label: "Corporate" },
                 { icon: "../../images/folder.png", label: "Finance" },
                 { icon: "../../images/folder.png", label: "Other" },
                ]
            },
            { icon: "../../images/recycle.png", label: "Deleted Items" },
            { icon: "../../images/notesIcon.png", label: "Notes" },
            { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
            { icon: "../../images/favorites.png", label: "Favorites" },
            ];
            $('#jqxTree').jqxTree({ source: source, width: '100%', height: '100%', theme: theme });

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[aigleborgneParticipant]

I used getRecordsHierarchy for mapping convenience. But as you pointed out, I could either use a DTO to match tree field naming, or either use a javascript method to convert my list.
It’s just that I prefer to use a direct functionality included in the UI component. Configuration over manipulation before calling the component.
I have tested many UI component in several libraries and one of the main problem is how to bind datasource to the component’s source.
Many of them require specific format and you must convert your source to use them.
I really like dataTables jquery plugin as it is highly configurable. I could just create my table and apply their component in the worst scenarii.

Back to the subject, getRecordsHierarchy returns hierarchy but can also transform the datasource with its mapping. This functionality is exactly what I was trying to explain. And even if I do have an initial hierarchy, it might not be in the right format.

I am quoting documentation: “The third parameter which is optional specifies the name of the ‘children’ collection. The last parameter specifies the mapping between the data Source fields and custom data fields.”

First phrase let me think that you can already have a hierarchy as a source but the second one doesn’t say precisely if we can also specify a mapping for children collection. Well, in fact, what’s purpose is the 3rd parameter ? I guess most developpers would have thought as I did, use it to map a children collection. But then, why could we map the main object and not children items?
I think this data-adapter is a great component, but unless I haven’t understand everything about it, it still lacks some details on how to properly use children items, assuming children will probably not be in the proper format.

Maybe, I am just wrong on this subject ?

[Peter StoevKeymaster]

Hi aigleborgne,

You can find below a working sample with Mapping:

  var categories = [
                { id: 1, name: 'CAT1', children: [{ id: 2, name: 'CAT1-1', children: null }, { id: 3, name: 'CAT1-2', children: null }] },
                { id: 4, name: 'CAT2', parent: null }
            ];
            var source = {
                datatype: "json",
                datafields: [
                { name: 'id' },
                { name: 'children' },
                { name: 'name' }
                ],
                id: 'id',
                localdata: categories
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            dataAdapter.dataBind();
            var records = dataAdapter.getRecordsHierarchy('id', null, 'items', [{ name: 'name', map: 'label'}, { name: 'children', map: 'items'}]);
            alert(records[0].items[0].name);

My opinion is that if you have a Hierarchy, then you should use it and it is not necessary to call third-party code for building something which you already have, but of course that is in case you have access to the server.Then you can simply map children to items in your server code.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[aigleborgneParticipant]

I have already tried your example previously and it didn’t work.
All items and children will be showed in tree component but children name field will not be mapped as label ! And I am pretty sure that their children is not mapped as items as well.

I have a hierarchy, yes, but field names are different and thus, require a conversion or mapping. I can do on my own eventually, but this is not the best solution as I might have some business logic on javascript side and I prefer to work with my own structure.

[Author]

Posts