从 JSON 文件 JavaScript 创建自定义树视图

Question

我有以下 JSON.

 json_data = [
{  "ServiceRequests": [
{
  "Header": {
    "NewNetworkServiceProvider": "8051",
    "PurchaseOrderNumber": "1517400004BELLON",
    "Version": "01",
    "RecordType": "001",
    "ServiceRecordType": 0
},
  "Details": [
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400004BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    }
  ]
},
{
  "Header": {
    "NewNetworkServiceProvider": "8051",
    "PurchaseOrderNumber": "1517400003BELLON",
    "Version": "01",
    "RecordType": "001",
    "ServiceRecordType": 0
  },
  "Details": [
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400003BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    },
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400003BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    },
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400003BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    }
  ]
},
{
  "Header": {
    "NewNetworkServiceProvider": "8051",
    "PurchaseOrderNumber": "1517400002BELLON",
    "Version": "01",
    "RecordType": "001",
    "ServiceRecordType": 0
  },
  "Details": [
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400002BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    },
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400002BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    },
    {
      "NewNetworkServiceProvider": "8051",
      "PurchaseOrderNumber": "1517400002BELLON",
      "VersionString": "01",
      "RecordType": "005",
      "ServiceRecordType": 5
    }
  ]
}]}     ];

我想把它转换成这样：

treedata_avm = [
  {
    label: 'Service Request',
    children: [
      {
        label: 'Record 1',
        children: [
          {
            label: 'Header',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }, {
            label: 'Details',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }
        ]
      }, {
        label: 'Record 2',
        children: [
          {
            label: 'Header',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }, {
            label: 'Details',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }
        ]
      },
      {
        label: 'Record 3',
        children: [
          {
            label: 'Header',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }, {
            label: 'Details',
            data: {
              definition: "This is header",
              data_can_contain_anything: true
            }
          }
        ]
      }
    ]
  }
];

我已经开始编写代码，但我对为我的新输出创建正确的标签名称感到困惑。我不关心细节，我想为它建立一个索引，就像在树视图中一样。

    var records = json_data;

for (var i =0; i < records.length; i++) {
    if (!newArrays[records[i].ServiceRequests]) {
      newArrays[records[i].ServiceRequests] = [];
      newArrays[records[i].ServiceRequests].push(records[i].ServiceRequests[i]);
      for (var j=0; j < newArrays[records[i].ServiceRequests].length; j++){

      }            
    }        
}

Answer 1

我一直发现使用 for in 循环获取 JSON 对象的标签最简单。所以这段代码应该可以得到你想要的格式：

    var tree = [];
for(var i = 0; i < json_data.length; i++) {
    for(j in json_data[i]) {
        var tempObject = {};
        tempObject.label = j;
        tempObject.children = [];
        console.log(json_data[i][j]);
        for(var k = 0; k < json_data[i][j].length; k++) {
            var tempObject2 = {};
            tempObject2.label = 'Record ' + (k + 1);
            tempObject2.children = [];
            for(var l in json_data[i][j][k]) {
                var tempObject3 = {};
                tempObject3.label = l;
                tempObject3.data = {
                    definition: "This is header",
                    data_can_contain_anything: true
                }
                tempObject2.children.push(tempObject3);
            }
            tempObject.children.push(tempObject2);
        }
        tree.push(tempObject);
    }
}

或者看看这个codepen

从 JSON 文件 JavaScript 创建自定义树视图

Create a custom tree view from JSON file JavaScript

javascript

treeview

json