0

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:-

enter image description here

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

2

Please take a reference of below steps:

1, Prepare lists:

enter image description here enter image description here enter image description here

2, Insert Code:

Result:

enter image description here

BR

1
  • your code worked well for me, but when i added it to the modern script editor i have to include all the code inside the $(document).ready(function () – John John Jan 26 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.