CODEWITHSUNDEEP
javascriptjsontreeview
SavvyGoat
SavvyGoat

Reputation: 99

Create a custom tree view from JSON file JavaScript

I have the following 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
    }
  ]
}]}     ];

I would like to convert it to something like this:

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
            }
          }
        ]
      }
    ]
  }
];

I've started writing the code, but i'm getting hung up on creating the correct label names for my new output. I don't care about the details, i want to build an index of it, like in a tree view. 

    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++){

      }            
    }        
}

Upvotes: 0

Views: 846

Answers (1)

Jacob Petersen
Jacob Petersen

Reputation: 1453

I've always found it easiest yo use a for in loop to get the labels for JSON objects. So this code should work to get the format you want:

    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);
    }
}

Or check out this codepen

Upvotes: 1

Related Questions