Menu Bar appears fully flat
Hi
I am using the Menu Bar in my Vue app. With the json datasource from the example at https://ej2.syncfusion.com/vue/documentation/menu/data-source-binding-and-custom-menu-items/ (under self- referential data) it works very well. What I am trying is, to provide a similar json array from a postgres database. I do an axios-call to a Node.js/Express API route, and the data I receive are in the right format, see below. Nevertheless, Menu Bar appears fully flat (see picture) without any subordination.
[
{
"id": 1,
"text": "wonen",
"pid": null
},
{
"id": 2,
"text": "banken",
"pid": 1
},
{
"id": 3,
"text": "zitbanken",
"pid": 2
},
{
"id": 5,
"text": "2-zits banken",
"pid": 3
},
{
"id": 6,
"text": "3-zits banken",
"pid": 3
},
{
"id": 7,
"text": "4-zits banken",
"pid": 3
},
{
"id": 8,
"text": "stoffen banken",
"pid": 3
},
{
"id": 9,
"text": "leren banken",
"pid": 3
},
{
"id": 10,
"text": "velvet banken",
"pid": 3
},
{
"id": 11,
"text": "slaapbanken",
"pid": 3
}
]
--UPDATE--
I just disovered that all id values (id, pid) should be between single quotes for the MenuBar to render properly. So I will have to append quotes to the id and pid fields in my Node.js/Express route function. This can be done by casting the integers as ::text in Postgres.
