I am trying to populate the kendo panel control using the below json
var jsondata = { "Heading 1":
[{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" },
{ "ID": 3, "Name": "TEST 3" }, { "ID": 4, "Name": "TEST 4" },
{ "ID": 5, "Name": "TEST 5" }, { "ID": 6, "Name": "TEST 6" },
],
"Heading 2":
[{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" },
{ "ID": 3, "Name": "TEST 3" }],
"Heading 3": [{ "ID": 1, "Name": "TEST 1" },
{ "ID": 2, "Name": "TEST 2" },
{ "ID": 3, "Name": "TEST 3" }] };
Heading 1, Heading 2, Heading 3 will be the heading of the panels and the "Name" will be the subitems
JS FILE :
$(document).ready(() => {
$("#pageLoader").hide();
$("#panelbar").kendoPanelBar();
var panelBar = $("#panelbar").data("kendoPanelBar");
$.each(Object.keys(jsondata), function (i, row) {
// trying to get all the names into an array
let array = new Array(Object.values(jsondata)[i].length);
$.each(Object.values(jsondata)[i], function (j, datarow) {
array[j] = Object.values(jsondata)[i][j].Name;
});
panelBar.append([
{
text: row,
items: ???
}
]);
});
});
Below are the things I have tried :
items : array (subitems are populated but they are shown as "undefined")
items : [{text : array }] (all the subitems are displayed as one item with comma separated values)
How are we supposed to give:
items : [{
text : "TEXT 1"
},
{
text : "TEXT 2"
}
]
I want to do the above thing but not hard code. In a loop or something.