剑道树视图的 JQuery 和 ASP.NET MVC json 输出答案

【问题标题】：JQuery and ASP.NET MVC json output for kendo treeview剑道树视图的 JQuery 和 ASP.NET MVC json 输出
【发布时间】：2021-07-14 22:44:40
【问题描述】：

大家好，我在使用 ASP.net MVC 的 Kendo UI 时遇到问题，其中混合了用于数据检索的 jQuery。

我当前的 treeview 如下所示：

但是，我希望它看起来更像这样：

我必须使用的 JSON 结构如下所示：

{
"meta": {
    "total_results": 193,
    "offset": 0,
    "total_pages": 1
},
"object_list": [{
        "Name": "facebook",
        "Description": null,
        "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    }, {
        "Name": "twitter",
        "Description": null,
        "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Social Networks"
    },  {
        "Name": "Google",
        "Description": null,
        "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
        "DocumentType": null,
        "ProviderId": 2,
        "Cat": "Search Engines"
    }, {
    ...ETC...

这看起来需要被格式化为如下所示：

$("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },

     check: onCheck,

     dataSource: [{
         id: 1, text: "Categories", expanded: true, spriteCssClass: "rootfolder", items: 
         [{
             id: 2, text: "Social Networks", expanded: true, spriteCssClass: "folder", 
             items: [
                { id: 3, text: "facebook", spriteCssClass: "html" },
                { id: 4, text: "twitter", spriteCssClass: "html" },
                { id: 5, text: "WhatsApp", spriteCssClass: "image" },
                { id: 6, text: "instagram", spriteCssClass: "image" },
                { id: 7, text: "wechat", spriteCssClass: "image" }
             ]}, {
             id: 8, text: "Search Engines", expanded: true, spriteCssClass: "folder", 
              items: [
                 { id: 9, text: "Google", spriteCssClass: "image" },
                 { id: 10, text: "Yahoo!", spriteCssClass: "pdf" }
              ]}
        ]
    }]
});

所以我的问题 - 由于我无法修改发送给我的 JSON，如何将其转换为正确的 treeview 结构格式？以太解决方案（JQuery 或 ASP.net MVC）就可以了。

任何帮助都会很棒！

更新

【问题讨论】：

标签： javascript jquery asp.net-mvc kendo-ui kendo-treeview

【解决方案1】：

好消息是您实际上可以使用 dataSource.schema.parse 事件更改 Api 数据：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script></head>
<body>
  <div id="treeview"></div>
  <script>
    let apiData = {
    "meta": {
        "total_results": 193,
        "offset": 0,
        "total_pages": 1
    },
    "object_list": [{
            "Name": "facebook",
            "Description": null,
            "Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        }, {
            "Name": "twitter",
            "Description": null,
            "Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Social Networks"
        },  {
            "Name": "Google",
            "Description": null,
            "Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
            "DocumentType": null,
            "ProviderId": 2,
            "Cat": "Search Engines"
        }]
    };
      
    $("#treeview").kendoTreeView({
     checkboxes: {
         checkChildren: true
     },
     dataSource: {
       data: apiData,
       schema: {
         model: {
           children: 'items'
         },
         parse: (data) => {
           // The new data array to be used by treeview
           let newData = [];
           
           data.object_list.forEach(item => {
             // Look for an already created parent for that categoty
             let parent = newData.find(parentItem => parentItem.text === item.Cat);
             
             // If not found...
             if (!parent) {
               // ... create a new one...
               parent = {
                 id: 2,
                 text: item.Cat,
                 expanded: true,
                 items: [],
                 spriteCssClass: "folder"
               };
               
               // ... and add it to the final data array.
               newData.push(parent);
             }
             
             // Add the new item to the parent
             parent.items.push({
               id: 3,
               text: item.Name, 
               spriteCssClass: "image"
             });
           });
           
           // Return the root object with its new child items
           return [{
             id: 1, 
             text: 'Categories', 
             expanded: true,
             spriteCssClass: "rootfolder",
             items: newData
           }];
         }
       }
     }
  });
  </script>
</body>
</html>

Dojo

【讨论】：

非常感谢！但是，在运行我的代码时，它似乎有错误 Cannot read property 'forEach' of undefined 由于 "object_list": 不存在于内部的最终 JSON 中数据解析。查看我的 OP，了解我的 JSON 在执行 console.log(data) 时的样子。