Create a custom tree view from JSON file JavaScript

Question

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

      }            
    }        
}

Jacob Petersen · Accepted Answer · 2015-08-24 16:36:41Z

1

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

answered Aug 24, 2015 at 16:36

Jacob Petersen

1,4531 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SavvyGoat Over a year ago

What if i wanted to go a little bit deeper. For those 'headers' that have multiple 'details', is it as simple as to add another for loop so it would display another section under details like 'Details 1', 'Details 2', 'Details 3'.

Jacob Petersen Over a year ago

Basically, yes. I made a new codepen with your updated JSON output.

Collectives™ on Stack Overflow

Create a custom tree view from JSON file JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related