Tree-hierarchy for 3 sharepoint lists using the https://gijgo.com/tree .. any help please

Question

I have the below 3 SharePoint lists, and using the REST APIs i am getting the data as follow:-

1- List named named "Department", here is the json for the items

"value":[
{"odata.type":"SP.Data.DepartmentsListItem","odata.id":"5a56de12-7ea6-433f-9f94-716ae1d80087","odata.etag":"\"1\"","odata.editLink":"Web/Lists(guid'cd1c4944-b3a4-4909-84ce-87aa023055af')/Items(1)","FileSystemObjectType":0,"Id":1,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ID":1,"ContentTypeId":"0x010086D7A470A7B9764BA4DC0A72B1BEC8DD","Title":"IT","Modified":"2021-01-19T22:20:02Z","Created":"2021-01-19T22:20:02Z","AuthorId":6,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"ebb7b219-6281-4879-b88b-8c10e70a1d1b","ComplianceAssetId":null},
{"odata.type":"SP.Data.DepartmentsListItem","odata.id":"1c8dc258-2cef-4abe-8495-c83f99af26fc","odata.etag":"\"1\"","odata.editLink":"Web/Lists(guid'cd1c4944-b3a4-4909-84ce-87aa023055af')/Items(2)","FileSystemObjectType":0,"Id":2,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ID":2,"ContentTypeId":"0x010086D7A470A7B9764BA4DC0A72B1BEC8DD","Title":"HR","Modified":"2021-01-19T22:20:06Z","Created":"2021-01-19T22:20:06Z","AuthorId":6,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"f43335c5-2a9d-45a0-977a-fbdb20df4540","ComplianceAssetId":null},
{"odata.type":"SP.Data.DepartmentsListItem","odata.id":"6d62a89e-6767-4925-b7ee-6ac5bb09fc6f","odata.etag":"\"1\"","odata.editLink":"Web/Lists(guid'cd1c4944-b3a4-4909-84ce-87aa023055af')/Items(3)","FileSystemObjectType":0,"Id":3,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ID":3,"ContentTypeId":"0x010086D7A470A7B9764BA4DC0A72B1BEC8DD","Title":"3rd Parties","Modified":"2021-01-19T22:30:45Z","Created":"2021-01-19T22:30:45Z","AuthorId":6,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"7a271fc6-b329-4756-be2a-7098f1048aa2","ComplianceAssetId":null}
]

2- List named "Category", which have a foreign key named "AssetCategoryDepartmentId" to the "Department" list, here is the json for all the items:-

"value":[
{"odata.type":"SP.Data.AssetCategoryListItem","odata.id":"262cbb2a-9edd-4b0a-84de-8b93e99dbc3b","odata.etag":"\"1\"","odata.editLink":"Web/Lists(guid'6220cbc6-f462-430f-88d4-b248922dee09')/Items(1)","FileSystemObjectType":0,"Id":1,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ContentTypeId":"0x010069C0683E79F8434DAB09B11838AACD83004A5A3F98639F2E44A772F8A25D075EDE","Title":"Servers","ComplianceAssetId":null,"AssetCategoryDepartmentId":1,"ID":1,"Modified":"2021-01-19T22:31:24Z","Created":"2021-01-19T22:31:24Z","AuthorId":6,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"4421bcc8-2e3e-4eca-a096-2534ae77bb74"}
]

3- list named "Asset", which have a foreign key name "AssetCategoryId" to the Category list, here is the json for the items:-

"value":[
{"odata.type":"SP.Data.AssetsListItem","odata.id":"465ee018-a0b5-48ad-9e9f-dd87d885a427","odata.etag":"\"5\"","odata.editLink":"Web/Lists(guid'fabf8117-9825-4488-aa79-f3cc47e92409')/Items(5)","FileSystemObjectType":0,"Id":5,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ContentTypeId":"0x0100D485035FD8061142A7B8C1A667BDDD6400F0D86F65CE31D04B8EB32E6ED36966EA","Title":"First test asset","ComplianceAssetId":null,"Availability":"4","Integrity":"3","Confidentiality":"2","AssetValuation":"<div class=\"ExternalClass4642069CEAED41E19025062A9922A4CE\"><div style=\"font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);\"><span style=\"color&#58;black;\">\u200bA description of the asset, it's importance and risk, and any mitigation goes here</span><br></div></div>","DateofEvaluation":"2020-12-18T00:00:00Z","LinkToRiskValue":{"Description":"?FilterField1=RiskValueAsset&FilterValue1=First test asset&FilterType1=Lookup","Url":"?FilterField1=RiskValueAsset&FilterValue1=First test asset&FilterType1=Lookup"},"AssetNumber":"Asset 5","AssetCategoryId":null,"ID":5,"Modified":"2021-01-19T22:15:26Z","Created":"2020-12-18T10:43:40Z","AuthorId":13,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"d8f8b0d6-d475-4578-9e36-9c503097f21b"},{"odata.type":"SP.Data.AssetsListItem","odata.id":"00616855-fdd5-4eae-bcca-d27e8d34c227","odata.etag":"\"5\"","odata.editLink":"Web/Lists(guid'fabf8117-9825-4488-aa79-f3cc47e92409')/Items(6)","FileSystemObjectType":0,"Id":6,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ContentTypeId":"0x0100D485035FD8061142A7B8C1A667BDDD6400F0D86F65CE31D04B8EB32E6ED36966EA","Title":"Asset 21 Desktop PCs","ComplianceAssetId":null,"Availability":"4","Integrity":"1","Confidentiality":"1","AssetValuation":"<div class=\"ExternalClass53A88747A0DE47BC944741D00CA25EEB\"><div style=\"font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);\"><span style=\"color&#58;black;\">\u200bDesktop PCs are used by administrative staff, and a few specific chargeable staff<p><br></p><p>(This is a text field, using for 'comments' rather than a value???)</p></span><br></div></div>","DateofEvaluation":"2020-04-15T23:00:00Z","LinkToRiskValue":{"Description":"?FilterField1=RiskValueAsset&FilterValue1=Asset 21 Desktop PCs&FilterType1=Lookup","Url":"?FilterField1=RiskValueAsset&FilterValue1=Asset 21 Desktop PCs&FilterType1=Lookup"},"AssetNumber":"Asset 6","AssetCategoryId":null,"ID":6,"Modified":"2021-01-19T22:15:25Z","Created":"2020-12-30T12:27:50Z","AuthorId":13,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"ce6cfa31-e246-4cb8-89cb-42e0e8872ef9"},{"odata.type":"SP.Data.AssetsListItem","odata.id":"b919772c-0ff9-4d36-980a-4c28d17736bc","odata.etag":"\"5\"","odata.editLink":"Web/Lists(guid'fabf8117-9825-4488-aa79-f3cc47e92409')/Items(7)","FileSystemObjectType":0,"Id":7,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ContentTypeId":"0x0100D485035FD8061142A7B8C1A667BDDD6400F0D86F65CE31D04B8EB32E6ED36966EA","Title":"IT Servers VH1","ComplianceAssetId":null,"Availability":"4","Integrity":"3","Confidentiality":"3","AssetValuation":null,"DateofEvaluation":"2021-01-12T00:00:00Z","LinkToRiskValue":{"Description":"?FilterField1=RiskValueAsset&FilterValue1=IT Servers VH1&FilterType1=Lookup","Url":"?FilterField1=RiskValueAsset&FilterValue1=IT Servers VH1&FilterType1=Lookup"},"AssetNumber":"Asset 7","AssetCategoryId":null,"ID":7,"Modified":"2021-01-19T22:15:26Z","Created":"2021-01-12T11:50:15Z","AuthorId":14,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"fed4861b-0749-447d-b9e0-c7e75f8f9db7"},{"odata.type":"SP.Data.AssetsListItem","odata.id":"7b2bffe5-a09c-4286-bb9f-5dc4508d4174","odata.etag":"\"6\"","odata.editLink":"Web/Lists(guid'fabf8117-9825-4488-aa79-f3cc47e92409')/Items(8)","FileSystemObjectType":0,"Id":8,"ServerRedirectedEmbedUri":null,"ServerRedirectedEmbedUrl":"","ContentTypeId":"0x0100D485035FD8061142A7B8C1A667BDDD6400F0D86F65CE31D04B8EB32E6ED36966EA","Title":"IT servers VH1","ComplianceAssetId":null,"Availability":"4","Integrity":"3","Confidentiality":"3","AssetValuation":null,"DateofEvaluation":"2021-01-12T00:00:00Z","LinkToRiskValue":{"Description":"?FilterField1=RiskValueAsset&FilterValue1=IT servers VH1&FilterType1=Lookup","Url":"?FilterField1=RiskValueAsset&FilterValue1=IT servers VH1&FilterType1=Lookup"},"AssetNumber":"Asset 8","AssetCategoryId":1,"ID":8,"Modified":"2021-01-19T22:31:36Z","Created":"2021-01-12T11:51:05Z","AuthorId":14,"EditorId":6,"OData__UIVersionString":"1.0","Attachments":false,"GUID":"c4e0d67a-7111-44ae-9ac1-3b10877ebd6f"}
]

now i want to build a tree-hierarchy using the https://gijgo.com/tree as follow:-

the hierarchy will show all the Departments >> under each Department to list the Categories >> under each category to show all the assets, but i am not sure how i need to join the above json data using JavaScript/Jquery (to have this structure @ https://gijgo.com//Locations/Get) and submit it to the dataSource inside the https://gijgo.com/tree, as follow:-

<body>
    <div id="tree"></div>
    <script>
        var tree = $('#tree').tree({
            primaryKey: 'id',
            dataSource: '/Locations/Get',
            imageUrlField: 'flagUrl'
        });
        tree.on('dataBound', function () {
            var node = tree.getNodeByText('North America');
            tree.expand(node);
        });
    </script>
</body>

I am planning to add the JavaScript inside a classic sharepoint page using Script Editor.

Thanks

Answer 1

Please take a reference of below steps:

1, Prepare lists:

2, Insert Code:

• https://github.com/kongmengfei/sharedproject/blob/master/jssharing/johnjohn/treeview.html

Result:

BR