This question revolves around Javascript and JSON, although I'm also open to any solutions using Webix.
Context
Currently, I am utilizing the Webix Javascript UI framework to populate a Datatable with JSON data structured like this:
complexData = {
"metadata": {
"itemno": 111222333,
"groupid": 19,
"name": "Blah"
},
"configs": [
{
"id": 1,
"name": "First",
"description": "some stuff",
"value": 222
},
{
"id": 3,
"name": "Third",
"description": "Foo",
"value": 333
}
],
"system": null
}
The initialization of my Datatable component is done as follows:
webix.ui({
view:"datatable",
columns:[
{ id:"id", header:"ID" },
{ id:"name", header:"Name" },
{ id:"description", header:"Description", fillspace: true },
{ id:"value", header:"Value" }
],
data: complexData.configs
});
Everything functions perfectly in this setup. You can view the output here.
Now, due to some processing requirements later on, I need to slightly alter my data structure. The objects within 'configs' should now be keyed based on their 'id', which can be arbitrary. This means that 'configs' becomes an object of objects instead of just an array:
complexData = {
"metadata": {
"itemid": 111222333,
"groupid": 19,
"name": "Blah"
},
"configs": {
"1": {
"id": 1,
"name": "First",
"description": "some stuff",
"value": 222
},
"3": {
"id": 3,
"name": "Third",
"description": "Foo",
"value": 333
}
},
"system": null
}
However, this new structure does not render the rows properly.
You can see the difference here.
Issue
When logging the working result (array) and the failing result (object of objects), the issue becomes apparent:
(2) [{…}, {…}]
0: {id: 1, name: "First", description: "some stuff", value: 222 }
1: {id: 3, name: "Third", description: "Foo", value: 333 }
length: 2
{1: {…}, 2: {…}}
1: {id: 1, name: "First", description: "some stuff", value: 222 }
3: {id: 3, name: "Third", description: "Foo", value: 333 }
As per Javascript/Webix, 'complexData.configs' appears as a single object rather than a collection of objects.
Hence, the main question at hand is:
How can 'complexData.configs' be referenced so that Javascript/Webix recognizes it either as an array or a collection?
Alternatively,
Is there a method (like mapping) by which Webix can parse 'complexData.configs' to understand the objects within as datatable rows?
Thank you.