Can treeview take a complex object, parse and build the tree

web
mobile

Topic: Can treeview take a complex object, parse and build the tree?

imyke asked 10 months ago

I was wondering if MDBootstrap's treeview component has a prop that takes an object, of the form

{
  "forceType": 1, "rootEntity": {
    "name": "112 BN",
    "parent": {},
    "children": ["__vue_devtool_undefined__", {
      "name": "A COY",
      "parent": {},
      "children": ["__vue_devtool_undefined__", {
        "name": "1 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 9.2387, "longitude": 6.0192},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "111000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }, {
        "name": "2 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 9.3984, "longitude": 6.8926},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "112000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }, {
        "name": "3 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 10.0231, "longitude": 7.0192},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "113000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }],
      "isMobile": false,
      "speed": 0,
      "direction": 0,
      "position": {"latitude": 9.0421, "longitude": 7.6354},
      "elevation": 0,
      "sidc": "10031000151211000000",
      "id": "110000000000000",
      "uniqueDesignation": "",
      "isAggregate": false
    }, {
      "name": "B COY",
      "parent": {},
      "children": ["__vue_devtool_undefined__", {
        "name": "4 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 9.4562, "longitude": 7.0349},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "121000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }, {
        "name": "6 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 10.4223, "longitude": 5.8992},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "122000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }],
      "isMobile": false,
      "speed": 0,
      "direction": 0,
      "position": {"latitude": 9.7846, "longitude": 6.4256},
      "elevation": 0,
      "sidc": "10031000151211000000",
      "id": "120000000000000",
      "uniqueDesignation": "",
      "isAggregate": false
    }, {
      "name": "C COY",
      "parent": {},
      "children": ["__vue_devtool_undefined__", {
        "name": "7 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 9.0891, "longitude": 5.3495},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "131000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }, {
        "name": "8 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 8.7421, "longitude": 7.0192},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "132000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }, {
        "name": "9 PL",
        "parent": {},
        "children": [],
        "isMobile": false,
        "speed": 0,
        "direction": 0,
        "position": {"latitude": 9.8764, "longitude": 7.6573},
        "elevation": 0,
        "sidc": "10031000141211000000",
        "id": "133000000000000",
        "uniqueDesignation": "",
        "isAggregate": false
      }],
      "isMobile": false,
      "speed": 0,
      "direction": 0,
      "position": {"latitude": 10.0421, "longitude": 7.9292},
      "elevation": 0,
      "sidc": "10031000151211000000",
      "id": "130000000000000",
      "uniqueDesignation": "",
      "isAggregate": false
    }],
    "isMobile": false,
    "speed": 0,
    "direction": 0,
    "position": {"latitude": 9.8717, "longitude": 8.1837},
    "elevation": 0,
    "sidc": "10031000161211000000",
    "id": "100000000000000",
    "uniqueDesignation": "",
    "isAggregate": false
  }, "assemblyArea": [2.5, 4, 2.7, 4.2]
}

And build the treeview out of that. Manually building the tree may not be feasible all the time in dynamic situations. Quasar framework already has support for this, outlined here.


imyke commented 10 months ago

Is there a way around this?


Magdalena Dembna staff premium commented 10 months ago

No, there is no such property. You can use v-for to iterate through your data and display as treeview-items but you would need to determine whether the current object is a parent to the next one. I don't believe there is an easy shortcut in this case. Kind regards, Magdalena


imyke commented 10 months ago

Ouch! I suppose I'll just embed a q-tree in that case. Thank you.


Magdalena Dembna staff premium commented 9 months ago

I will pin this suggestion to our idea board - maybe we will consider introducing it in the future. Kind regards, Magdalena


imyke commented 9 months ago

Alright, thanks.


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Vue
  • MDB Version: 5.8.2
  • Device: Laptop
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes
Tags