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

Answer 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

• SavvyGoat: 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: Basically, yes. I made a new codepen with your updated JSON output.